Jump to content

How can I add a Base64 Image into a text area

Kevin Flynn

Recommended Posts

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


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


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

Link to comment
Share on other sites

  • 1 month later...

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


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

and your JavaScript can insert the html to it


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.


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


document.getElementById("myImg").src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...