Question

I would like to display a ‘key’ (from a keychain) next to certain key words in an HTML/JavaScript app I’m creating, but I do not want to make any HTTP requests to load an image. How can I do this reliably across all major browsers?

Is there a UNICODE value that works? (I couldn’t find one)

Is there a Webdings Font that works? (They don’t usually work in Opera and Firefox)

Is there a way to create an image in JS using a base64 image source provided by a String from the JavaScript?

Thanks!

Answer 1

You can use base64 data in a image’s scr property:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

You can then scan through the text with javascript, and add image tags where needed.
(Or wrap the text in a span, and set the image as the span’s background.)

---

To actually create a image in the DOM:

var img=document.createElement("img");
    img.setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38G    IAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
    img.setAttribute('alt', 'Red dot');
    img.setAttribute('height', '10px');
    img.setAttribute('width', '10px');
document.body.appendChild(img);

---

Edit:
You can use this tool to encode a image to Base64.