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

问题描述

我有一个要部署到 Heroku 的 Next.js 应用程序。当我在本地开发时，我会看到图像，但是当我推送到 Heroku 并检查站点时，图像有一个 404。我有一个公共文件夹，文件夹中包含图像 (.png)，以及我引用的代码像这样的图像

<Image
    src="/wb_blue_white.png"
    alt="WB Concept"
    width="70"
    height="70"
    className={navStyles.logo}
/>

在本地和 prod 中，如果我查看图像源，它们是相同的 src="/_next/image?url=%2Fwb_blue_white.png&w=256&q=75" 但我在 prod 中得到 404。什么可能导致图像显示 localhost 而不是 Heroku prod build？

package.json

"scripts": {
    "dev": "next dev","build": "next build","start": "next start -p $PORT"
},

文件结构

components
pages
public

解决方法

查看 next custom server doc 及其 example repo。

在这个用于配置服务器的快速代码中，app.render() 似乎是为 nextjs page 设置路由，即 /a 到 pages/a。我不确定每个路径是否都需要这样做，或者是否出于演示目的而这样做。尝试摆弄。

无论如何，如果它类似于基本的快递服务器，我怀疑，快递实例上的 use() 方法将添加一个“中间件”，它 1. 接受请求，2. 将其传递给下一个中间件，或发送对客户的回应。

使用 server.use(express.static(path.join(__dirname,'public')));，其中 server 在这种情况下是快速实例，幸运的是（实际上是约定）在示例存储库中，您可以添加处理静态文件服务的中间件。

我忘记了配置 express 的确切方法，但我猜是：

• 在 express() 实例化之后，或
• 就在 listen() 之前

应该可以解决问题。只需将 server.use(express.static(path.join(__dirname,'public'))) 放在那里。

,

在根文件夹中为图像创建一个目录，并从那里相对导入。成功了吗。