How can I add a Base64 Image into a text area

[Kevin Flynn]

I have images stored as Base64 in a database field that are loaded into Spotfire. I am trying to get the image loaded in a text area on the change of the filter (either using a First(photo) calculated field, or just hardcoding it currently). I am getting the below error when trying and not really sure why or how I can get this to work.

An example of the HTML is

<DIV>

<P>Taken from wikpedia<IMG src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' border=0></P>

</DIV>

This HTML works in a regular HTML page, but it is giving the "Invalid src value 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

[Jose Leviaguirre]

Hello Kevin,

You should be able to render the image on the Text Area if you don't have html sanitation on. If you do, then you can add the image via JavaScript

Your text area should have a placeholder with some id

html

<DIV id="myDiv"></DIV>

and your JavaScript can insert the html to it

js

document.getElementById("myDiv").innerHTML=`<P>Taken from wikpedia <IMG src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' border=0></P>`

If you have an image and want to replace the contents via base64, you can do that as well with JavaScript regardless if your html sanitation is enabled or not.

html

<DIV id="myDiv"> <P>Taken from wikpedia <IMG id="myImg" border=0></P></DIV>

js

document.getElementById("myImg").src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='