Question 216575 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – NextJS how to avoid Image warnings

I’m getting a warning for almost all of the local images in my site:

Image with src "http://localhost:3000/_next/static/media/icon_home.0f967506.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

Even when I’m letting NextJS just infer the size, as they suggest to:

<div className="flex aspect-square w-10 justify-center md:w-12">
    <Image src={link.icon} alt={link.title} />
</div>

I saw some threads related to the same warning, but they all end up suggesting to use fill or to set the size with TailwindCSS classes, but I’d like to avoid specifying any size at all, as I understand that’s the whole point of using Image + local resource, since it’s able to calculate the size of the .png (which actually works great)

Is there any workaround to get rid of the warning without specifying size properties?

Tags:

2

Answers


  1. 0

    You can try disabling server-side rendering (SSR) when rendering the image using the React-No-SSR Package .
    first install : npm install react-no-ssr

    then wrap the Image with <NoSSR> :

     <NoSSR>
      <Image src={link.icon} alt={link.title} />
    </NoSSR>

    make sure to import : import NoSSR from 'react-no-ssr';

    Login or Signup to reply.
  2. 0

    Try adding w-auto to your Image component:

    <div className="flex aspect-square w-10 justify-center md:w-12">
    <Image className="w-auto" src={link.icon} alt={link.title} />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search