如何为无ID的图片基于文件名添加alt文本？

当然可以通过图片文件名来自动添加alt文本，你之前的代码存在几个关键问题，导致无法正常运行：

• 重复给document.onload赋值，后面的函数会直接覆盖前面的，最终只有最后一个函数会执行
• 代码中的img变量未定义，没有获取页面上实际存在的图片元素
• 错误地修改了图片的src属性，这不是为已有图片添加alt文本的正确逻辑

下面是可行的实现方案：

基础实现（手动映射文件名与alt文本） #

document.addEventListener('DOMContentLoaded', function() {
  // 获取页面中所有图片元素
  const allImages = document.querySelectorAll('img');
  
  // 定义文件名到alt文本的对应关系
  const altMapping = {
    'icons-vegan.png': 'Vegan Icon',
    'icons-gluten.png': 'Gluten Icon'
    // 可根据需求继续添加更多文件名映射
  };
  
  allImages.forEach(img => {
    // 从图片src中提取纯文件名（兼容带路径的src，比如"/assets/icons-vegan.png"）
    const fileName = img.src.split('/').pop();
    // 如果当前文件名在映射表中，设置对应的alt和title
    if (altMapping[fileName]) {
      img.setAttribute('alt', altMapping[fileName]);
      img.setAttribute('title', altMapping[fileName]);
    }
  });
});

进阶实现（自动生成alt文本，适合有规律的文件名） #

如果你的文件名遵循统一规则（比如icons-xxx.png格式），可以不用手动维护映射表，自动生成alt文本：

document.addEventListener('DOMContentLoaded', function() {
  const allImages = document.querySelectorAll('img');
  
  allImages.forEach(img => {
    const fileName = img.src.split('/').pop();
    // 提取文件名中的核心标识部分，比如"icons-vegan.png" → "vegan"
    const coreName = fileName.replace(/^icons-|\.png$/g, '');
    // 自动格式化alt文本（首字母大写，添加后缀）
    const altText = `${coreName.charAt(0).toUpperCase()}${coreName.slice(1)} Icon`;
    
    img.setAttribute('alt', altText);
    img.setAttribute('title', altText);
  });
});

代码说明 #

• 使用DOMContentLoaded事件确保DOM完全加载后执行，避免找不到图片元素
• querySelectorAll('img')可以获取页面中所有图片，无需依赖ID或其他标识
• 两种方案都兼容相对路径和绝对路径的图片src
• 进阶方案适合批量处理命名规则统一的图片，减少重复配置

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