base64 data images are not loading in the editor

[kundanbasha]

I have given base64 data image to img tag as a value to the tiny editor. But, In the console, I'm getting without src attribute.

<p><img alt="" width="166" height="108"></p>
<p>Hello world</p>

https://codesandbox.io/s/tinymce-react-forked-sn5egm?file=/src/index.js

It should have the src attribute right?

I'm using "tinymce": "^6.3.1" and "@tinymce/tinymce-react": "^4.2.0" MacBook pro

[exalate-issue-sync[bot]]

Ref: INT-3101

[duongquocphu]

u should try this src="data:image/png;base64..."

hope this help

[kundanbasha]

@Quocphu123 Thanks for the reply. I have tried but no use. The following is the code, which is written in the codesandbox but still output is same.

const value='<p><img src="data:png;base64,iVBORw....." alt="" width="166" height="108"></p><p>Hello world</p>';

function App() {
  const onEditorChange = (editorContent) => {
    console.log(editorContent);
  };

  return (
    <Editor
      onEditorChange={onEditorChange}
      init={{
        menubar: false,
        paste_data_images: true,
        plugins: `preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons`,
        toolbar: [
          `undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print`,
          `insertfile image media template link anchor codesample`
        ]
      }}
      value={value}
    />
  );
}

output:

<p><img alt="" width="166" height="108"></p>
<p>Hello world</p>

Please let me know where did i make a mistake

[duongquocphu]

you should look really close

[kundanbasha]

@Quocphu123 Thank you :). working fine