更新图片而不更改 URL 不算更新图片

Question

我正在使用 Next.js 14，将其托管在 Vercel 上，使用 Supabase 作为我的数据库，并使用 Cloudflare 作为 DNS。

我正在运行一个包含图像的网站，我从我的 Supabase DB 获取这些图像 URL。我通常不会更改 URL。

我从我的

public

文件夹中提供图像，因此我存储在 Supabase 中的 URL 通常看起来像

<domain>/<folder_name>/<file_name>

。

假设我更新了

public

文件夹中的图像本身，但是当我推送新版本时，所提供的图像仍然是旧图像。但是，如果我访问原始 URL 本身，图像就会更新。但如果我转到

_next/image?url=...

，这就是旧图像。

这是我的图像响应标头的示例：

Access-Control-Allow-Origin: *
Age: 8
Cache-Control: public, max-age=60, must-revalidate
Content-Disposition: inline; filename="image-example-A.webp"
Content-Security-Policy: script-src 'none'; frame-src 'none'; sandbox;
Cross-Origin-Resource-Policy: cross-origin
Date: Mon, 29 Apr 2024 21: 7: 7 GMT
Last-Modified: Mon, 29 Apr 2024 21: 6: 6 GMT
Server: Vercel
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
Timing-Allow-Origin: *
Vary: Accept
X-Robots-Tag: noindex
X-Vercel-Cache: HIT

以下是我尝试过的方法：

• 打开控制台，清空缓存并硬重新加载
• 删除浏览器缓存
• 清除 Vercel 数据缓存
• 清除 Cloudflare 缓存

这些都不会更新图像。

但是，如果我在代码中向图像添加查询参数（例如

?v=1

），那么它会自动获取新图像。但是，我不希望这是我唯一的解决方案，因为这样我就必须在需要立即更改时更新它，并且更愿意按按钮清除缓存并在需要时获取新图像。

它更新的另一种方式是在 12 小时后，我假设这是因为我的 Cloudflare 缓存设置为 12 小时。所以我猜 Cloudflare 与此有关？但如果是这样的话，为什么当我在 Cloudflare 上按

Purge Everything

时，没有任何反应？我知道传播可能需要一些时间，但一个小时过去了，它仍然是同一个图像。

我的 Vercel 缓存设置为 60，即使它变得陈旧，也无法获取新图像？

对于使用 Vercel、Nextjs、Supabase 或 Cloudflare 进行缓存，我是否遗漏/误解了什么？我还能做什么来触发刷新而无需推送新代码？

感谢您的帮助！

Answer 1

这只是因为 next.js 生成了一些图像的优化版本并存储它们。当您触发新部署时，此缓存不会刷新。

所以你有一些选择：

1. 您可以使用cacheTTL 设置。阅读此内容以获取更多数据：https://nextjs.org/docs/api-reference/next/image#caching-behavior

2. 如果不需要，请关闭特定图像（在组件级别）或所有图像（nextjs 配置文件）的图像优化。

3. 也许您可以为图像优化过程编写一个新的加载器。我不知道它是否可以帮助你但是......

希望能解决您的问题🙏🏻