错误:不要使用 <img>.改用“下一个/图像"中的图像.- Next.js 使用 html 标签 <img/>(带有样式的组件) [英] Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components )
问题描述
我知道在 Next.js 中我们有 Image 组件,但我遇到的问题是我不能将它用作普通的 HTML 标记,如 <img/>
.我必须给它一个布局,但是没有选项可以将它作为一个普通的 HTML 标签来控制,除此之外,我不能使用它的帧运动.
I know that in Next.js we have Image component, but the problem I have with it is that I can't use it as a normal HTML tag like <img />
. I have to give it a layout, but there's no option to control it as a normal HTML tag, and besides that, I can't use framer motion with it.
所以我刚刚安装了 next-images
所以我当然可以导入图像并使用它们,一切正常,直到我 npm run build 登录页面看到一些结果,然后就是这个警告:
So I just installed next-images
so I can import images and use them of course, and everything works fine, 'till I npm run build the landing page to see some results, and there's this warning:
Failed to compile.
./components/Presentation/Presentation.js
77:13 Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element. @next/next/no-img-element
Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
npm ERR! code ELIFECYCLE
这是我使用带有样式组件的 img
标记的地方:
This is where I'm using img
tag with styled components:
<PresentationUnderText2 src="/underText-Presentation.png" alt="" />
<PresentationScissor2 src="/scissors.svg"alt=""/>
如何正常使用img
标签?
推荐答案
从 Next.js 11,ESLint 支持开箱即用,现在提供了一组新规则,包括 @next/next/no-img-element
规则.
From Next.js 11, ESLint is supported out-of-the-box and a new set of rules is now provided, including the @next/next/no-img-element
rule.
您可以在 .eslintrc
文件中禁用此特定 ESLint 规则,就像任何其他规则一样.
You can disable this specific ESLint rule, like any other rule, in your .eslintrc
file.
{
// ...
"rules": {
// Other rules
"@next/next/no-img-element": "off"
}
}
这篇关于错误:不要使用 <img>.改用“下一个/图像"中的图像.- Next.js 使用 html 标签 <img/>(带有样式的组件)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!