nextjs image标签 打包后不显示
- 前端
- 三生万物
- 0
本地代码：
<Image src='/images/plane.png' layout='fill' alt='plane' />
本地用了next Image 标签可以正常显示，但打包后放在服务器上就显示不出来了。
主要是因为 Image 标签引入动态资源会有问题，这里可以使用 img 来代替。
在 nextjs 环境中使用 img 标签需要关闭 eslint 规则。
您可以通过以下方式在构建过程中忽略掉毛：
// next.config.js
module.exports = {
eslint: { ignoreDuringBuilds: true },
// your other settings here ...
}
如果你想专门禁用文件的规则或只是一行，请执行以下操作：（如果在 VSCode 中使用 ESLint 扩展，则可以单击两次完成）
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/images/plane.png" alt="plane" />
// for whole file, add this to top:
/* eslint-disable @next/next/no-img-element */
// for a section:
/* eslint-disable @next/next/no-img-element */
// your code here...
/* eslint-enable @next/next/no-img-element */
您还可以使用 .eslintrc 以下命令禁用规则：
{
"extends": "next",
"rules": {
"@next/next/no-img-element": "off",
}
}
您还可以使用 eslintignore 或忽略（所有规则）完整文件 ignorePatterns。请参考：https://eslint.org/docs/latest/user-guide/configuring/ignoring-code
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
