重复嵌入的数据 URI 图像

Question

假设我使用数据 URI（例如 <img src="data:image/png;base64,...." />.

在 HTML 文件中嵌入了图像

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

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

宽度必须大于您的图像宽度。

Answer 2

情况似乎有点奇怪。通常你会通过将图像数据放在一个单独的文件中然后每个图像加载该源来实现这一点。

理想情况下，您会将数据移动到单独的文件中，但如果这不是一个选项，也许您可以使用数据 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" />

重复嵌入的数据 URI 图像

repeating an embedded data URI image

html

data-uri

更新...