如何在 NextJS 中缓存图像资源？答案

【问题标题】：How can I cache image assets in NextJS?如何在 NextJS 中缓存图像资源？
【发布时间】：2022-11-10 23:08:52
【问题描述】：

NextJS 文档特别指出 (https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control)：

You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively.

在 NextJS 中缓存图像资产的另一种方法是什么？

我尝试使用 NextJS Image 组件，但是它将我的自托管图像 url 与专有的 NextJS url 混淆了。我想逃避那个。

【问题讨论】：

标签： next.js nextjs-image

【解决方案1】：

当使用<Image /> 组件时，NextJS 将自动存储和提供它存储在服务器端的优化版本。这就是您看到 NextJS URL 的原因（因为那是新的优化和缓存图像所在的位置）。如果您不想要这些优化，您可以使用常规的<img /> 元素，因为 NextJS 需要使用它的后端服务来为您优化图像。

【讨论】：