如何避免作为图片源的data URI被浏览器缓存？

我使用img标签将data-image base64 URI作为图片源时，浏览器会缓存该源。若是普通URL，我会添加随机查询参数来防缓存，但data URI场景下，现有的两种可行方法都很繁琐：

• 修改data-image SVG URI中的自定义属性（确实有效）
• 将SVG作为文件部署，使用带查询参数的URL

补充：为何需要解决这个问题？ #

我有大量img标签组成的列表，希望利用懒加载机制在Vue3中延迟生成实际图片源URL。以下是代码片段：初始时将src设为data URI，当触发懒加载时，创建并设置实际图片源。

问题：在Chrome中，已缓存的源无法触发懒加载。如果第一个图片的initialSrc被缓存，后续所有图片的懒加载机制都会失效。

<img :src="mySource" loading="lazy" @load="onLoad">

const initialSrc = "data:image/svg+xml;base64,PD94bWw=="

const imageSrc = ref()
const onLoad = async () => {
      if (!imageSrc.value) {
        imageSrc.value = await createRealSrc();
      }
    };

const mySource = computed(() => imageSrc.value ?? initialSrc)

关于data URI的实际表现说明 #

1. data URI是否会触发请求？ #

有人质疑这一点，实际情况是：Chrome网络面板会记录针对data URI的GET请求，但这并非真正的HTTP请求——它不会经过后端或TCP传输，只是Chrome开发者工具会按照HTTP协议的调用逻辑记录请求和响应。

2. 不同场景下的懒加载表现 #

假设有两个img标签，不同src设置会有不同表现：

• 场景1：相同普通URL

  <img src="http://image.png" loading="lazy">
  <img src="http://image.png" loading="lazy">
  

  第一个img会懒加载，但第二个会在第一个加载完成后立即加载，因为其src可从缓存获取。

• 场景2：带不同查询参数的普通URL

  <img src="http://image.png" loading="lazy">
  <img src="http://image.png?abc" loading="lazy">
  

  两个img都会懒加载，因为URL不同，无法从缓存获取。

• 场景3：相同data URI

  <img src="data:image/svg+xml;base64,PD94bWw==" loading="lazy">
  <img src="data:image/svg+xml;base64,PD94bWw==" loading="lazy">
  

  第一个img会懒加载，但第二个会在第一个加载完成后立即加载，因为其src可从缓存获取。

• 场景4：不同data URI

  <img src="data:image/svg+xml;base64,PD94bWw==" loading="lazy">
  <img src="data:image/svg+xml;base64,sdfsdfs==" loading="lazy">
  

  两个img都会懒加载，因为URI不同，无法从缓存获取。

3. 缓存后为何不触发懒加载？ #

这是Chrome中的实际表现，不确定是规范要求还是当前版本的实现细节。逻辑上说得通：既然图片数据可从缓存获取，懒加载就没有优势。但我希望实现懒加载，因为想“误用”这一机制来延迟执行耗时操作。

4. data URI的缓存与加载时机 #

• data URI确实会被缓存：根据Chrome网络面板的记录，所有浏览器都会缓存图片数据，无论源是文件还是data URI。
• data URI的加载时机：源会在图片加载时才被加载，这应该符合HTML规范，但暂无官方链接佐证。

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