如何批量为指定类型图片的文件名追加cachebreaker缓存破坏参数？

你当前的代码仅在控制台打印了拼接时间戳的地址，未实际修改图片元素的src属性，且存在选择器语法错误、用哈希拼接无法触发重新请求的问题，可直接使用以下批量处理代码：

// 匹配所有SVG格式图片
const allSvgImgs = document.querySelectorAll('img[src$=".svg"]');
// 生成全局统一缓存破坏时间戳
const cacheBustTimestamp = Date.now();

allSvgImgs.forEach(img => {
  // 拆分原有地址的哈希部分避免冲突
  const [baseSrc, hashPart = ''] = img.src.split('#');
  // 自适应原有地址是否已有查询参数
  const paramConnector = baseSrc.includes('?') ? '&' : '?';
  // 替换图片地址触发重新请求
  img.src = `${baseSrc}${paramConnector}t=${cacheBustTimestamp}${hashPart ? `#${hashPart}` : ''}`;
  // 调试用：打印修改后的地址
  console.log(img.src);
});

方案说明 #

• 修正了原代码选择器未闭合的语法问题，可正常匹配所有SVG图片
• 支持批量处理页面内全部SVG资源，无需逐个指定文件名
• 自适应原有地址的查询参数、哈希参数，不会破坏原有地址功能
• 使用查询参数拼接时间戳，可真正触发浏览器重新请求资源，绕过本地缓存
• 所有图片共用同一个时间戳，避免同一份SVG资源被多次重复加载

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