Home/ Questions/Q 3853098
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T17:25:02+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.org/wiki/Data_URI_scheme

    Regards
    Neil

    • 0