如何在HTML页面中仅定义一次Base64字符串并复用在链接与图片标签？

你可以通过以下几种方式只定义一次Base64字符串，同时供两个属性使用：

方法一：JavaScript变量赋值 #

把Base64字符串存在JS变量中，再通过DOM操作给对应元素的属性赋值：

<script>
  // 仅定义一次Base64字符串
  const base64ImgUrl = "data:image/png;base64,iVBORw0KG...";
</script>

<a id="imgLink" target="_blank">
    <img id="previewImg">
</a>

<script>
  // 给两个属性赋值
  document.getElementById('imgLink').href = base64ImgUrl;
  document.getElementById('previewImg').src = base64ImgUrl;
</script>

方法二：HTML自定义data属性结合JS #

将Base64字符串存在HTML的自定义data属性里，再用JS读取后赋值：

<!-- 用容器元素的data属性存储Base64字符串 -->
<div data-image-src="data:image/png;base64,iVBORw0KG...">
  <a id="imgLink" target="_blank">
      <img id="previewImg">
  </a>
</div>

<script>
  const imgSrc = document.querySelector('[data-image-src]').dataset.imageSrc;
  document.getElementById('imgLink').href = imgSrc;
  document.getElementById('previewImg').src = imgSrc;
</script>

方法三：现代前端框架语法（如Vue/React） #

如果用Vue、React这类框架，直接通过变量绑定语法就能实现复用：

Vue示例： #

<template>
  <a :href="base64Img" target="_blank">
    <img :src="base64Img">
  </a>
</template>

<script setup>
const base64Img = "data:image/png;base64,iVBORw0KG...";
</script>

React示例： #

function ImagePreviewLink() {
  const base64Img = "data:image/png;base64,iVBORw0KG...";
  return (
    <a href={base64Img} target="_blank" rel="noopener noreferrer">
      <img src={base64Img} alt="预览图" />
    </a>
  );
}

内容的提问来源于stack exchange，提问作者Konrad