Как не дублировать одно и то же изображение base64 в img и тегах (например, для отображения в лайтбоксе)

Question

Я создаю отдельную HTML-страницу и использую изображения base64 внутри своего документа. Я хочу иметь возможность нажимать на эти картинки, чтобы увеличить их в лайтбокс. Я не понимаю, как избежать дублирования изображения base64 в теге <a> для достижения этой цели. Я читал о решении 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>

Answer 1

Как то так?

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>