使用危险的SetInnerHtml时无法在反应nextjs中显示图像

Question

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

Answer 1

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}" >