是否存在官方方案可让部分img图片元素不使用浏览器缓存？

目前HTML与ECMAScript规范暂未提供img标签原生的禁止缓存属性，针对该场景有以下几种不同优先级的实现方案：

1. 前端最简优化方案（无需服务端改动） #

你目前使用的URL拼接随机参数的方案逻辑是可行的，只是可以通过原生URL和URLSearchParams接口优化拼接逻辑，避免手动处理参数分隔符的冗余代码：

function addNoCacheParam(originUrl) {
  const url = new URL(originUrl);
  // 使用时间戳替代随机数，完全避免重复概率
  url.searchParams.set('_t', Date.now());
  return url.toString();
}
// 使用示例：img.src = addNoCacheParam('https://example.com/xxx.jpg')

该方案兼容性覆盖所有主流现代浏览器，实现成本最低，适合大多数业务场景。

2. 无URL修改方案（前端可控） #

如果不希望修改原资源URL，可以通过fetch API的缓存控制参数实现强制拉取最新资源：

async function setNoCacheImg(imgEl, sourceUrl) {
  const response = await fetch(sourceUrl, {
    cache: 'reload' // 强制跳过本地缓存，直接向服务端请求最新资源
  });
  const blob = await response.blob();
  const tempUrl = URL.createObjectURL(blob);
  imgEl.src = tempUrl;
  // 图片加载完成后释放临时URL，避免内存泄漏
  imgEl.addEventListener('load', () => URL.revokeObjectURL(tempUrl), { once: true });
}

注意：该方案要求目标图片资源配置了允许当前域名请求的CORS响应头，否则会出现跨域报错。

3. 最优解（可调整服务端配置时使用） #

如果有权限修改服务端响应头，最规范的方案是给图片资源配置Cache-Control: no-cache响应头。配置完成后浏览器会自动在每次请求时验证资源是否更新，资源未更新时返回304节省带宽，更新时返回最新内容，前端不需要做任何额外处理。
如果使用Apache服务，可以在图片存放的单独目录下创建.htaccess文件添加以下配置，不会影响站点其他业务的运行：

<FilesMatch "\.(png|jpg|jpeg|gif|webp|avif)$">
Header set Cache-Control "no-cache"
</FilesMatch>

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