从公共文件夹 NextJS 获取图像答案

【问题标题】：Get image from public folder NextJS从公共文件夹 NextJS 获取图像
【发布时间】：2022-07-28 23:57:21
【问题描述】：

我正在动态保存图像。图像存储在 NextJS 项目的公共文件夹中。

获取图片的路径是/public/upload/catalog/{imagename}

正如 NextJS 关于访问公共文件夹的文档中所说，我正在尝试通过路径 /upload/catalog/{imagename} 获取此图像

它在 development 环境中完美运行，但在 production 中我无法访问图像。

Image 组件代码示例：

<Image
    src={src} //src === "/upload/catalog/1644916867663.jpg"
    width={width || '50'}
    height={height || '50'}
    objectFit={objectFit || 'cover'}
    alt='image'
/>

【问题讨论】：

此链接在生产中返回什么？ "https://{YOUR_DOMAIN}/upload/catalog/1644916867663.jpg"
404。找不到此页面。
您是否尝试在生产环境中记录src 以查看它的输出？
您是否能够访问生产中的任何公共文件？您如何确保将这些图像上传到 next.js 目录下？您如何检查生产文件系统并检查上传的文件是否存在？
当我将图像添加到公共并构建项目时，图像出现在页面上。因此，我尝试从公共目录中删除图像，但图像仍然出现在页面上。我认为 NextJS 在构建后缓存了公共目录并且我无法使用公共目录访问动态文件

标签： next.js next-images

【解决方案1】：

可能有点晚了，但我也遇到了同样的问题，仔细阅读 nextjs 文档后，一清二楚：

注意：只有在构建时位于公共目录中的资产才会由 Next.js 提供服务。在运行时添加的文件将不可用。我们建议使用 AWS S3 等第三方服务来获取持久文件存储。

因此使用 s3 可能是一个解决方案。

【讨论】：