This is in reference to this answer: Embed png image in html file using Jinja2

Is it possible to embed the base64 encoding of my image once in the Html, but use it in many places? I can use jQuery if needed.

This is in reference to this answer: Embed png image in html file using Jinja2

Is it possible to embed the base64 encoding of my image once in the Html, but use it in many places? I can use jQuery if needed.

• javascript
• jquery
• html

3 Answers 3

Simply put your base64 image in an IMG tag, say with an id="logo", then wherever you want to use it just have an IMG tag with an empty "src" attribute and a class="logo". Then use jQuery to set the "src" attribute for those IMGs to the master. e.g.

jQuery:

var src = $('img#logo').attr('src');
$('img.logo').attr('src', src);

HTML:

    ......<img id="logo" src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="logo">
    ......
    ......<img class="logo" src="" alt="logo">

I'm glad you asked this question as it's something I wanted to do a couple of weeks ago in a lightbox clone (slimbox2). I wanted to embed the image in the javascript, rather than load it from a file, since the image is specific to the javascript (nice "next", "prev", "play", "pause" buttons) and I did not want the user to have to store them in a specific location.

BEWARE, this type of data is fine for IE8 and above but apparently not Internet Explorer 7 and below. See:

http://en.wikipedia/wiki/Data_URI_scheme

Regards Neil

Load it once and use the jQuery .clone method to copy the image element.

Or, alternatively, load it from a server like a proper grown up :)

An alternative is to embed the image in CSS and use the CSS class wherever you need the image.