-1

I have an SVG image I want to render through the classic JSX Element <img>, in place of the <Image>.

    <img
      src="/public/smiley-face.svg"
      css={classes.sideSmileyFace}
      alt="Presentation logo"
      role="presentation"
    />

This way, the IDE does not complain about the position of my SVG file, but it's not rendered: the compilation does not transform that path into the correct one. On the other hand, if I place src="smiley-face.svg it does work, but the IDE complains. Any idea to fix this?

Bertuz
  • 2,390
  • 3
  • 25
  • 50
  • Does this answer your question? [Next.js Image component error src missing though I am providing the src prop](https://stackoverflow.com/questions/68524500/next-js-image-component-error-src-missing-though-i-am-providing-the-src-prop) – Yilmaz Apr 03 '22 at 01:05
  • _"it does work, but the IDE complains"_ - what is the IDE complaining about? – juliomalves Apr 03 '22 at 19:16

1 Answers1

1

Files in the local public directory end up being served from "root" (https://whatever/) after compilation.

For regular <img />, either src="smiley-face.svg" or src="/smiley-face.svg" will work, with or without the leading slash (but don't include the word "public").

Next's custom <Image /> component on the other hand requires a leading slash since your image is relative (i.e., inside public). So only src="/smiley-face.svg" will work.

As for your IDE complaining, I'm guessing you're talking about a message that looks something like this?

Do not use <img>. Use Image from 'next/image' instead.

If so, you can turn that message off by setting that rule to "off" in your .eslintrc.json file:

{
  "extends": ["next/core-web-vitals"], // or whatever existing settings you have
  "rules": {
    "@next/next/no-img-element": "off" // add this
  }
}
Mark G
  • 1,868
  • 1
  • 6
  • 15