时间戳

首页 > 解决方案 > 如何不在 img 和标签中复制相同的 base64 图像（例如在灯箱中显示）

html - 如何不在 img 和标签中复制相同的 base64 图像（例如在灯箱中显示）

问题描述

我正在构建一个独立的 HTML 页面，并且在我的文档中使用 base64 图像。我希望能够单击这些图片以在灯箱中放大它们。我不明白如何避免在<a>标签中复制 base64 图像来实现这一点。我阅读了 CSS 解决方案，但我不明白如何将 base64 传递给标签和<a>标签。

<a href="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</a>

标签： htmlcssbase64

解决方案

像这样的东西？

document.getElementById("container").addEventListener("click", function(e) {
  var tgt = e.target;
  if (tgt.tagName === "IMG") {
    document.getElementById("zoom").innerHTML = this.outerHTML;
    document.getElementById("zoom").style.display = "block"
  }
})
img {
  cursor: pointer
}

#zoom {
  position: absolute;
  top: 100px;
  left: 100px;
  display: none;
}

#zoom img {
  height: 100px;
  width: 100px
}
<div id="container">
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
<div id="zoom"></div>

如果你需要 A 标签试试这个

document.getElementById("container").addEventListener("click", function(e) {
  var tgt = e.target;
  if (tgt.tagName === "IMG") {
    tgt.parentElement.setAttribute("href",tgt.src);
  }
})
<div id="container">
  <a href="#">
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
  </a>
</div>

推荐阅读