我有一个Next.js应用程序，我正在部署到Heroku。当我在本地开发时，我看到了图像，但当我推到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"，但我在prod中得到404。是什么原因导致图像显示在localhost中，但不在Heroku prod构建中？
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p $PORT"
},档桉结构
components
pages
public
5条答案
按热度按时间jucafojl1#
我也遇到了同样的问题。对我来说，问题根本不是组件。我在Netlify上托管我的站点，我没有意识到默认情况下Netlify构建devDependencies。所以开发/测试的节点包意外地被编译成了生产版本。
我将
NODE_ENV（在Netlify中）更改为production，并重新组织了dependencies和devDependencies之间的包......错误消失了。我认为组件触发了这个问题，因为初始请求导致它们在服务器端生成/优化。因此，即使构建成功。远程映像请求导致开发包在错误的上下文中运行。
我希望有一天这能帮助到其他人。
llew8vvj2#
请查看next custom server doc及其example repo。
在这段用于配置服务器的代码中，
app.render()似乎在为nextjspage设置路由，即/a到pages/a。我不确定这是否是每条路径所需要的，或者是出于演示目的而做的。无论如何，如果它与基本的express服务器类似（我怀疑这一点），express示例上的
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')))放进去就行了。wwtsj6pe3#
在根文件夹中为图像创建一个目录，然后从那里导入图像。
8cdiaqws4#
有关于several的文章，但基本上Sharp是必需的，应该安装。NextJS文档中的措辞使它听起来是可选的，但使用默认的加载程序Sharp is required。
atmip9wb5#
在我的例子中，我在
.dockerignore中有public文件夹，结果所有的静态资产都被忽略了。希望它能帮助一些人。