Question

假设我使用数据URI在HTML文件中嵌入了图片（例如<img src="data:image/png;base64,...." />。

有没有办法多次显示该图像，后续图像指的是初始图像，而不必重复数据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>

Answer 1

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

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

以下代码段包含两者的示例。

＆＃13;

var images = document.querySelectorAll("#JS img");
var src = images[0].src;
for (var i = 0; i < images.length; ++i) {
  images[i].src=src;    
}

＆＃13;

#CSS img { 
    width: 20px;
    height: 20px;
    background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) center center no-repeat;
}

＆＃13;

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

＆＃13;

更新...

根据您更新的问题，我已经探索了一个似乎符合您要求的JS解决方案（假设允许使用JS）：

＆＃13;

(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;    
    }
})();

＆＃13;

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

＆＃13;

Answer 2

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

宽度必须大于图像宽度。

重复嵌入数据URI图像

2 个答案:

更新...