CodeFaster

Question

Draft JS Editor Showing Camera Icon Instead of an Image

Dec 19 2020

Hi, I'm trying to integrate a draftjs editor on my blog. Everything is working fine except for the image. When I drag and drop the image into the editor, I can see the image. But once the user reloaded the page, instead of showing the uploaded picture, it's displaying the Camera icon.

Also, note that I'm using the draftjs-to-html plugin for converting draft js data to HTML. I'll then save the converted data to the database. To edit the content again, I'm using the convertFromHTML function to convert data from HTML to draft js. I think draftjs-to-html is causing this issue.

Any help is much appreciated.

1 Answers

Karthick

Dec 19 2020

From your above code snippet, what I understood is the image on the converted HTML does not have <figure> tag wrapped. Draftjs by default only display image which has <figure> element wrapped. So to fix this issue, open \node_modules\draftjs-to-html\lib\block.js file in the editor and search for a line "entity.type === 'IMAGE". Inside of that condition statement, replace the below line,

if (entity.type === "IMAGE") {
  const { alignment } = entity.data;
  if (alignment && alignment.length) {
    return `
        <div style="text-align:${alignment};">
            <img src="${entity.data.src}" alt="${entity.data.alt}" style="height: ${entity.data.height};width: ${entity.data.width}"/>
        </div>`;
  }
  return `<img src="${entity.data.src}" alt="${entity.data.alt}" style="height: ${entity.data.height};width: ${entity.data.width}"/>`;
}

with this line

if (entity.type === "IMAGE") {
  const { alignment } = entity.data;
  if (alignment && alignment.length) {
    return `
        <figure style="text-align:${alignment};">
            <img src="${entity.data.src}" alt="${entity.data.alt}" style="height: ${entity.data.height};width: ${entity.data.width}"/>
        </figure>`;
  }
  return `
    <figure>
        <img src="${entity.data.src}" alt="${entity.data.alt}" style="height: ${entity.data.height};width: ${entity.data.width}"/>
    </figure>
    `;
}

That's it. Now rebuild the project and see whether it's working. Hopefully, this would work.

Note: Please keep in mind that the changes you made in the above file get reset when a new draftjs-to-html version arrives.

Upvote (0)

Downvote (0)

Share

Your Answer

Do you know any other way to solve the above problem? If so, write your answer to help the community.

Write here