CODEWITHSUNDEEP
htmldata-uri
Jason S
Jason S

Reputation: 189656

repeating an embedded data URI image

Let's say I have an embedded image in an HTML file using a data URI (e.g. <img src="data:image/png;base64,...." />.

Is there any way to show that image several times, with subsequent images referring to the initial one, without having to repeat the data URI? for example (though a bad one):

<html><head>...</head>
  <body>
    <p>Here's my car:</p>
    <img id="img1" src="data:image/png;base64,..." />
    <p>Some details about my car</p>
    <p>Did I mention I just bought a car?</p>
    <p>And here it is again:</p>
    <img something_to_show_another_image_again="#img1" />
    ...
  </body>
</html>

Upvotes: 5

Views: 1261

Answers (2)

Moob
Moob

Reputation: 16184

Seems a bit of an odd situation. Usually you would achieve this by having the image data in a separate file and then each image loading that source.

Ideally you would move the data to a separate file but if that's not an option maybe you could use the data-uri as a background image to each element? Failing that, you could use JavaScript to set the source of each image.

The following snippet includes examples of both.

var images = document.querySelectorAll("#JS img");
var src = images[0].src;
for (var i = 0; i < images.length; ++i) {
  images[i].src=src;    
}
#CSS img { 
    width: 20px;
    height: 20px;
    background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) center center no-repeat;
}
<div id="CSS">
  <p>The image src is empty but the background is defined in the stylesheet:</p>
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
    <img src="" />
</div>
<hr />
<div id="JS">
  <p>Here we use JavaScript to set the source of all these images to match that of the first:</p>
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>

Update...

Further to your updated question I've explored a JS solution that seems to meet your requirements (assuming JS is allowed):

(function linkAliasedImages(){
    var aliasedImages = document.querySelectorAll("img[src*='#']");
    
    for (var i = 0; i < aliasedImages.length; ++i) {
        var aliasID = aliasedImages[i].src;
        aliasID = (aliasID.substring(aliasID.indexOf("#")+1));
        var source = document.getElementById(aliasID).src;
        aliasedImages[i].src=source;    
    }
})();
<p>Here's my star:</p>
<img id="img1" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<p>Some details about my star</p>
<p>Did I mention I just bought a star?</p>
<p>And here it is again:</p>
<img src="#img1" />
<p>And again:</p>
<img src="#img1" />

Upvotes: 5

Szymon Sadło
Szymon Sadło

Reputation: 91

<img style="background: url(URI) repeat-x;width:100px;" />

Width have to be more than you're image width.

Upvotes: 0

Related Questions