Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components )
Full error message
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. 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 This is where I'm using img tag with styled components: <PresentationUnderText2 src="/underText-Presentation.png" alt="" /> <PresentationScissor2 src="/scissors.svg"alt=""/> What can I do to use img tag as normal?
Solutionsource: stackoverflow \u2197
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. You can disable this specific ESLint rule, like any other rule, in your .eslintrc file. { // ... "rules": { // Other rules "@next/next/no-img-element": "off" } }
API access
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/7f3a853c37e86800b370097a36631e42559a9aa226675e33bf5566f5d4b5b8bahash \u00b7 7f3a853c37e86800b370097a36631e42559a9aa226675e33bf5566f5d4b5b8ba