How to fix NextJS Image warnings

Question

In my next js project I am using <Image> component to display images.

When using an image in a card (Image inside Link component):

  <Link
      href={link}
      className="
        w-[345px] lg:w-full lg:max-w-[440px] hover:shadow-xl hover:shadow-primary/50
        flex flex-col rounded-md bg-primary relative card-two overflow-hidden
      "
    >
      <Image
        src={imageUrl}
        alt="card img"
        width={440}
        height={220}
        className="card-two__image"
      />
      <span className="text-white h3-text text-center py-4 bg-primary card-two__title">
        {title}
      </span>
    </Link>

a warning is displayed in the console:

Image with src "/assets/images/license-plate-renewal.png" 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

I tried:

1. set the w-auto and h-auto classes to the Image component

2. Set width: auto and height: auto to the class card-two__image

3. Wrap in an additional div container

4. Set h-auto to <Link> component

5. Set dimensions via fill={true}

None of these helped to get rid of warning

Answer 1

Try to resolve warning by adding inline-style and layout properties in your Image tag. Check below code:-

<Image
  src={imageUrl}
  alt="card img"
  width={440}
  height={220}
  layout="responsive"
  style={{ width: '100%', height: 'auto' }}
  className="card-two__image"
/>

Make sure that no CSS styles are interfering with the aspect ratio of the image. Ensure that the actual image dimensions match the width and height specified in the component.