Console warnings about height and width of IK Image component

Image API
1

Hello!

In Next.js using :
<Image
…
width={width}
height={height}
…
/>
for all images I get this in the console :

Image with src “https://ik.imagekit.io/xxxxxxx/wibble.jpg?tr=w-640,c-at_max” 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.

My width and height are calculated depending on how big I want them to display on the page and the HTML has those values for width=200 height=197.9898 etc.

What is <Image doing then to generate those warnings in the console?
Cheers,
Andy

2

Hi. This is a result of underlying NextJS behavior itself. The issue arises due to how it ensures aspect ratio consistency between your HTML attributes and runtime-resolved layout behavior.

You can either try rounding the height (or whichever is the computed metric) to an integer like 198 in your case.

You could also style the image like this

img {
  width: 100%;
  height: auto; /* or vice versa */
}

You can also try the fill mode

<div style={{ position: 'relative', width: '100%', height: 'auto' }}>
  <Image
    src="..."
    fill
    style={{ objectFit: 'contain' }}
    sizes="(max-width: 768px) 100vw, 640px"
    alt="..."
  />
</div>