next.js - Next.js 图像未进入生产服务器
问题描述
图像组件
import Image from "next/image";
<Image
src={`/images/gallery/m${label}.png`}
layout="fill"
objectFit="cover"
/>
next.config.js
const withImages = require("next-images");
module.exports = withImages({
distDir: "build",
webpack: (config) => {
const found = config.module.rules.findIndex((rule) => {
if (rule.test) {
return rule.test.exec("u.svg");
}
});
config.module.rules[found].test = /\.(jpe?g|png|gif)$/i;
config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: "@svgr/webpack",
options: {
svgoConfig: {
plugins: {
removeViewBox: false,
},
},
},
},
],
});
return config;
},
images: {
domains: ["*"],
},
});
在这里,我试图在我的 UI 中显示本地图像。在开发服务器中它正在工作,但是当我部署它时它不起作用。它说内部服务器错误
https://frontend-319717.appspot.com/_next/image?url=%2Fimages%2Fgallery%2Fm1.png&w=1200&q=75
这是我在谷歌应用引擎上检查部署的应用程序:
https://frontend-319717.appspot.com/home
我该如何解决?
解决方案
推荐阅读
- powershell - Runas-Command 中的 Powershell 数组
- php - 同时运行的 cron 作业记录处理组合
- java - 如何在 Spring Boot JUnit 5 中对 oracle 存储过程调用进行单元测试
- c# - ComboBox DataSource 没有按我的预期工作
- azure - 更新存储帐户时创建一个事件,它将触发一个事件并在存储队列 Azure 门户中发送一条消息
- java - Java 变量到时间字符串的转换
- karate - 如何验证并关闭使用空手道 UI 单击链接后出现的新选项卡?
- c - 为什么这里的“sum”变量每次迭代都没有更新?
- batch-file - 批处理 - 如何确定特定网络适配器是否已设置为 DHCP?
- python - 如何使异步工作?我无法理解问题