如何用HTML和CSS将图片src链接简化为自定义变量形式？

作为HTML/CSS新手，你可以用以下几种纯前端方法实现自定义短标识引用图片URL，不用写完整链接：

方法1：直接通过JavaScript替换src属性 #

先定义一个标识与完整URL的映射表，页面加载后自动把img标签里的短标识替换成真实URL：

<script>
// 先把短标识和对应的图片URL存起来
const imgLinks = {
  value01: "https://img1.com",
  value02: "https://img2.com",
  // 可以继续添加更多标识与URL的对应关系
};

// 页面加载完成后执行替换操作
document.addEventListener('DOMContentLoaded', function() {
  // 找到页面中所有img标签
  const allImgs = document.querySelectorAll('img');
  allImgs.forEach(img => {
    // 获取当前img的src值（也就是你定义的短标识）
    const shortId = img.getAttribute('src');
    // 如果映射表里存在这个标识，就把src替换成真实URL
    if (imgLinks[shortId]) {
      img.setAttribute('src', imgLinks[shortId]);
    }
  });
});
</script>

<!-- 引用图片时直接写短标识 -->
<img src="value01" alt="示例图片1">
<img src="value02" alt="示例图片2">

注意：这种方式在页面加载瞬间，可能会出现图片加载失败的占位图标——因为浏览器一开始会尝试加载value01这个不存在的地址，之后才会被JS替换。

方法2：用HTML data属性（更规范，推荐新手使用） #

用专门的data-*属性存储短标识，避免和默认的src属性冲突，也不会出现加载占位图标：

<script>
const imgLinks = {
  value01: "https://img1.com",
  value02: "https://img2.com"
};

document.addEventListener('DOMContentLoaded', function() {
  // 只筛选带有data-src-id属性的img标签
  const targetImgs = document.querySelectorAll('img[data-src-id]');
  targetImgs.forEach(img => {
    const shortId = img.getAttribute('data-src-id');
    if (imgLinks[shortId]) {
      img.setAttribute('src', imgLinks[shortId]);
    }
  });
});
</script>

<!-- 引用时通过data-src-id存储短标识 -->
<img data-src-id="value01" alt="示例图片1">
<img data-src-id="value02" alt="示例图片2">

这种方法逻辑更清晰，浏览器不会一开始就尝试加载无效地址，用户体验更好。

额外补充：静态站点工具进阶方案 #

如果你之后接触Jekyll、Hexo这类静态站点生成工具，可以直接在配置文件里定义图片变量，再在模板中调用：

• 配置文件中添加：img_value01: https://img1.com
• 模板中引用：<img src="{{ site.img_value01 }}" alt="示例图">
  不过这个属于进阶用法，新手先掌握前面两种纯JS方法即可。

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