重复使用嵌入式数据URI图片

Question

重复使用嵌入式数据URI图片

5

假设我在HTML文件中使用data URI嵌入了一张图片（例如<img src="data:image/png;base64,...." />），有没有办法多次显示该图片，后续的图片引用初始图片，而不必重复使用data URI？例如（虽然不好）：

<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>

- Jason S

2个回答

0

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

宽度必须大于图片的宽度。

- Szymon Sadło

不，我不想均匀重复它，我想多次使用它。 - Jason S

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Moob · Accepted Answer

这似乎是一个有点奇怪的情况。通常情况下，您可以通过将图像数据放在单独的文件中，然后每个图像加载该源来实现此目的。

理想情况下，您应该将数据移动到单独的文件中，但如果这不是一个选项，也许您可以使用data-uri作为每个元素的背景图像？如果失败了，您可以使用JavaScript来设置每个图像的源。

以下代码片段包括了两个示例。

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>

更新...

在您更新的问题后，我探索了一个JS解决方案，看起来可以满足您的要求（假设允许使用JS）：

(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" />