javascript - Next.js 公共图像未在生产构建中显示

Question

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

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

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

包.json

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

文件结构

components
pages
public

score 0 · Accepted Answer

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

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

有了server.use(express.static(path.join(__dirname, 'public')));，server在这种情况下，express 实例在哪里，幸运的是（实际上是约定）在示例 repo 中，您可以添加处理静态文件服务的中间件。

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

应该做的伎俩。就放在server.use(express.static(path.join(__dirname, 'public')))那里。

score 0 · Accepted Answer

这方面有几篇文章，但基本上Sharp是必需的，应该安装。NextJS 文档中的措辞使它听起来是可选的，但对于默认加载器，Sharp 是必需的。

score 0 · Accepted Answer

我遇到了同样的问题。对我来说，问题根本不是组件。我在 Netlify 上托管我的网站，但我没有意识到默认情况下 Netlify 会构建 devDependencies。因此，用于开发/测试的节点包意外地被编译用于生产。

我将NODE_ENV（在Netlify中）更改为并重新组织了和production之间的包......并且错误消失了。dependenciesdevDependencies

我认为组件触发了这个问题，因为初始请求导致它们在服务器端生成/优化。所以即使构建成功。远程图像请求导致开发包在错误的上下文中运行。

我希望有一天这对其他人有所帮助。

score 0 · Accepted Answer

0

在根文件夹中为图像创建一个目录，然后从那里相对导入。行得通。

于 2021-06-28T18:33:33.707 回答

4 回答 4