如何解决 nuxt 静态图片缓存问题？答案

【问题标题】：How do I solve the nuxt static image caching problem?如何解决 nuxt 静态图片缓存问题？
【发布时间】：2021-09-16 12:25:56
【问题描述】：

我在浏览器中遇到了静态图片缓存问题。

我在我的项目中显示静态文件夹中的图像，当我更改图像的内容而不更改图像名称时，浏览器无法检测到它。

我希望 Nuxt 根据修改日期缓存此图像，或者以某种方式检测此更改并显示图像。有解决办法吗？

【问题讨论】：

【解决方案1】：

实际上 nuxt 开箱即用 - 至少在生产版本中以及从 assets 文件夹加载图像时。

对于assets 文件夹中的资产，webpack 会生成一个哈希并在构建时将其附加到文件名中。如果图像的内容发生变化，哈希值也会发生变化。这样浏览器就知道何时从服务器加载更新的图像。

static 文件夹默认不被 webpack 处理，因此哈希不会添加到文件名中。

所以尝试利用assets文件夹，那么缓存问题应该解决了。

【讨论】：

我知道这一点。但只是因为我认为编译图像更改是不必要的。我之所以在静态文件夹中添加一些文件是为了干扰固定内容而不依赖于编译。
@vulkan 为什么不捆绑图片？
因为我们在构建后将构建文件保存在不同的位置。图像可以是内容变化。我们不想只为一个图像重新编译并提交构建文件。它解决了“资产”缓存问题，但我们不喜欢它，因为它在编译后无法操作。
您是否有权访问应用中某处的内容更新日期？然后你可以请求像/images/test.jpg?{timestampOfUpdate}这样的图像
是的，这确实是一个可行的解决方案。