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

Posted 2023-03-06

【中文标题】Next.js 公共图像未在生产构建中显示

【英文标题】：Next.js public images not showing in production build

【发布时间】：2021-05-31 07:39:34

【问题描述】：

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

<Image
    src="/wb_blue_white.png"
    
    
    
    className=navStyles.logo
/>

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

package.json

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

文件结构

components
pages
public

【问题讨论】：

你是如何部署到heroku的？也许服务器阻止了该流量？

@Hiro 通过 cli。我在该公用文件夹中也有一个正在工作的网站图标。只是 .png 图像不是

你用了什么buildpack？可能自动检测为节点应用程序？那么似乎 nextjs 使用内置（？）快速服务器来提供内容。在那种情况下，是否配置了快速静态服务？像这样：github.com/vercel/next.js/discussions/14121

@Hiro 我在想是这样的。我使用可能使用内置快速服务器的 create-next-app 创建了项目？我不确定。非常新的下一个尝试学习它，因为我继续。所以不确定我会在哪里添加引用以使用 path.join。我认为接下来会在您构建项目时生成服务器文件。

在下面添加了一些（有点）具体的说明。

【参考方案1】：

查看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 实例，幸运的是（实际上是约定）在示例 repo 中，您可以添加处理静态文件服务的中间件。

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

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

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

【讨论】：

您为使用 firbase 功能和托管服务的人提供了哪些解决方案，这些天来一直在与这个问题作斗争

@vincentO 创建另一个帖子并在此处参考。

@vincentO 你找到解决办法了吗？刚碰到这个问题，不知道怎么解决。

将图片保存到另一个目录

另一个目录@skyridertk 是什么意思

【参考方案2】：

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

【参考方案3】：

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

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

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

我希望有一天这可以帮助其他人。

【讨论】：

我还是没听懂你说什么。对我来说，在 yarn build 图像消失后运行 yarn start 时

如果这仅在您运行build 时发生，但在您运行yarn dev 时不发生，那么它可能是同样的问题。我认为 build 只捆绑dependencies 下的包，而不是devDependencies。我不是 nextjs 专家，但作为临时快速测试，您可以尝试将所有 devDependencies 移动到依赖项中并测试它是否有效。 （这只是为了测试。不是一个很好的生产解决方案）

嗯，即使它有效，但为生产捆绑开发依赖项并不是一件好事，对吧？

> 作为临时快速测试...（这仅用于测试。不是生产的好解决方案）

【参考方案4】：

上面有severalarticles，但基本上Sharp是必须的，应该安装。 NextJS 文档中的措辞使它听起来是可选的，但使用默认加载器Sharp is required。