CODEWITHSUNDEEP
javascriptreactjsnext.js
VicCoder0659
VicCoder0659

Reputation: 213

Unable to display image in react nextjs while using dangerouslySetInnerHtml

I was trying to create a simple WYSIWYG editor in nextjs. Here I came across this problem, where I have to display the uploaded image to the screen. This could be easily done by creating a blob URL of the image and using the URL in the src of the image IF you are not using dangerouslySetInnerHtml. But while using it the link appears broken. This was the result I was getting on the console.

blob:http://localhost:3000/f28f5781-d2b0-4a20-9d56-10b9ae7f66e7/:1 GET blob:http://localhost:3000/f28f5781-d2b0-4a20-9d56-10b9ae7f66e7/ net::ERR_FILE_NOT_FOUND

Here is what I tried to do. On image upload event, I trigger a function that sets the image URL using React.useState() , eg setImageUrl(objectUrl) . here's the contentEditable div. :

<div
            style={{ margin: "10px", border: "none", outline: "none" }}
            onBlur={handleBlur}
            contentEditable
            data-placeholder="Enter text here"
            onKeyUp={(e) => handleKeyUp(e)}
            dangerouslySetInnerHTML={{ __html: innerHtml }}
            onClick={(e) => handleContentEditableChange(e)}
          >

here is the innerHtml ,Let me know if more info is needed. thanks

setInnerHtml(
        ${innerHtml}
        <p>${tempText}</p>
        <img src=${imageUrl}/>
      );
    /* here is what I am doing with the file, this code is triggered just after I upload the file */

    const objectUrl = URL.createObjectURL(file);
    setImageUrl(objectUrl); 
// the imageUrl is same as the one above in image src . P.S. i have made use of readAsDataUrl as well but failed to get the desired result

Upvotes: 0

Views: 2235

Answers (1)

hangindev.com
hangindev.com

Reputation: 4873

The browser is reading the img src as blob:http://localhost:3000/sth/ while it should be blob:http://localhost:3000/sth. To fix it, wrap imageUrl with quotes or remove the / or do both:

<img src="${imageUrl}" /> or <img src=${imageUrl} > or <img src="${imageUrl}" >

Upvotes: 2

Related Questions