Next.js 公共/图像未显示在 vercel 生产版本中答案

【问题标题】：Next.js public/images not showing in vercel production buildNext.js 公共/图像未显示在 vercel 生产版本中
【发布时间】：2022-10-24 05:51:58
【问题描述】：

我有一个要部署到 Vercel 的 Next.js 应用程序。当我在本地开发时，我看到了图像，但是当我推送到 Vercel 并检查站点时，图像有一个 404。我有一个 public/images 文件夹，我在文件夹中有图像，并且我引用图像的代码像这样

<Image
  src="/images/logo.jpg"
  alt="logo"
  width="70"
  height="70" />

在本地和生产中，如果我查看图像源，它们是相同的src="/_next/image?url=%2Fimages%2Flogo.jpg&w=1920&q=75"，但我在生产中得到 404。什么可能导致图像显示在 localhost 中，但没有出现在 Vercel 生产版本中？

包.json

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint" }

文件夹结构

components
pages
public/images/

本地主机图像工作

http://localhost:3000/_next/image?url=%2Fimages%2Flogo.jpg&w=1920&q=75

Vercel 生产图像不工作

https://mohammadrahi-portfolio.vercel.app/_next/image?url=%2Fimages%2Flogo.jpg&w=1920&q=75

【问题讨论】：

【解决方案1】：

尝试在 Nextconfig 文件中添加此代码：

 const nextConfig = {
    reactStrictMode: true,
    images: {
     loader: "akamai",
     path: "/",
    },
 };

它将起始路径设置为根。

【讨论】：