防止将数据 URI 缓存为图像源？

Question

我有一个 img 标签并使用数据图像 base64 URI 作为源。当然，浏览器会缓存这个源。我不想缓存。如果它是一个普通的 URL，我会添加一个随机查询参数值以防止缓存。

如何防止缓存此数据图像 base64 URI 源？

带有数据图像base64 URI的img：

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

img 具有正常的 URL 源和查询参数以防止缓存：

<img src="https://foo?1234RandomString">

由于原始图像是 SVG，我可以使用数据图像 SVG URI 并向该 SVG 添加自定义属性以防止缓存。这有效。我还可以将 SVG 作为文件添加到我的部署中，并使用带有查询参数的 URL。我觉得两个都很丑。

PS：为什么我需要它？ 我有一个很大的 img 标签列表。我想在vue3中使用延迟加载机制来延迟生成实际的源URL。

看看这段摘录。最初，它将 src 设置为数据图像 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)

评论中存在一些疑问，数据 URI 实际上是通过请求加载的。他们是：

网络选项卡的屏幕截图，显示对数据 URI 的 GET 请求

更多说明：

假设您的文档中有两个 img 标签：

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

在这种情况下，第一个 img 标签将被延迟加载。但是，第二个不会延迟加载，它将在第一个加载后立即加载，因为它的 src 是从缓存中获取的。

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

在这种情况下，两者都会延迟加载，因为 URL 不同并且不是从缓存中获取。

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

在这种情况下，第一个 img 标签将被延迟加载。但是，第二个不会延迟加载，它将在第一个加载后立即加载，因为它的 src 是从缓存中获取的。

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

在这种情况下，两者都将被延迟加载，因为 URI 不同并且不是从缓存中获取。

当您使用数据 URI 作为源时，真的会发出 GET 请求吗？ 根据 Chrome 网络选项卡：是的。从真正的 HTTP 术语来看，它真的是真实的吗？我不知道（编辑：是的，可能不是真的。）。肯定没有BE可以回答，只有浏览器缓存。

数据URI是否真的存储在缓存中？根据Chrome网络选项卡：是的。我想是的。据我了解，图像数据存储在所有浏览器的缓存中。图像数据的来源是文件还是数据 URI 并不重要。

即使图像是数据 URI，源是否在加载图像时加载（而不是更早）？我说是。我也认为这是规范的一部分（HTML-spec ??）。但我没有链接来证明这一点。

Answer 1

很多混乱。我对此感到抱歉。以下是一些已发布的解决方案，我想强调一下：

使用基于 SVG 的数据 URI，而不是基于 Base64 的数据 URI。

使用这样的数据 URI，您可以添加具有随机值的自定义属性，以使同一图像具有不同的 URI：

data:image/svg+xml,%3C%3Fxml version='1.0' **custom-attribute="random value"** encoding='UTF-8'%3F%3E%3Csvg width='282.21' height='48'...

如果您有基于 SVG 的 Base64 编码数据 URI，请添加 Base64 编码注释。

将“

<!-- random value -->

”编码为base64，并将其添加到base64编码数据URI中以使其唯一。

使用普通的唯一 URL，当延迟调用时，会执行延迟操作。

当惰性的东西首先是 BE 调用时，这会起作用。 不是延迟加载数据 URI，而是在 onLoad 中执行延迟 BE 调用。首先使用唯一的 BE URL 作为 img 源，然后直接对 BE 进行延迟调用。