How to insert image into lightning-input-rich-text programmatically?

Question

I have an image in base64 format and I want to push the image data explicitly into my lightning-input-rich-text. Is there any way?

My code looks like this:

<lightning-input-rich-text value={body} label="EmailBody" placeholder="Email Body" >
            </lightning-input-rich-text>

and in my JS Controller I am trying to do this

this.body = this.filesUploaded[0]['VersionData']

// this.filesUploaded[0]['VersionData'] represent the base64 format data

Instead of showing the image My lightning-input-rich-text show base64 string for ex: ('iVBORw0KGgoAAAA....')

score 1 · Accepted Answer · answered Apr 21 '22 at 02:16

You would need to make sure your are adding an IMG html tag to the contents of your rich text control. So, in your js file, your body variable must be set to a string that represents the html code needed to create an IMG tag that uses base64 as its source, e.g.:

this.body = '<img src="data:image/png;base64,' + this.filesUploaded[0]['VersionData'] + '" />';

How to insert image into lightning-input-rich-text programmatically?

1 Answers1