{"id":165,"hash":"7f3a853c37e86800b370097a36631e42559a9aa226675e33bf5566f5d4b5b8ba","pattern":"Error: Do not use &lt;img&gt;. Use Image from &#39;next/image&#39; instead. - Next.js using html tag &lt;img /&gt; ( with styled components )","full_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.\n\nSo 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:\n\nFailed to compile.\n\n./components/Presentation/Presentation.js\n77: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\n\nNeed to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules\n\nnpm ERR! code ELIFECYCLE\n\nThis is where I'm using img tag with styled components:\n\n<PresentationUnderText2 src=\"/underText-Presentation.png\" alt=\"\" />\n<PresentationScissor2   src=\"/scissors.svg\"alt=\"\"/>\n\nWhat can I do to use img tag as normal?","ecosystem":"npm","package_name":"next.js","package_version":null,"solution":"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.\n\nYou can disable this specific ESLint rule, like any other rule, in your .eslintrc file.\n\n{\n  // ...\n  \"rules\": {\n    // Other rules\n    \"@next/next/no-img-element\": \"off\"\n  }\n}","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/68203582/error-do-not-use-img-use-image-from-next-image-instead-next-js-using-ht","votes":56,"created_at":"2026-04-19T04:41:25.078651+00:00","updated_at":"2026-04-19T04:51:06.850366+00:00"}