How to get width and height attributes on img element using Next/Image

Question

The image is working just fine. Here is the code

<Image
  layout="fixed"
  src="/images/example.jpeg"
  alt="Example image"
  width="140"
  height="140"
 />

But, when I run the website on web.dev, I don't get a topscore in Performance. The main reason is Image elements do not have explicit width and height

I've studied this, and can tell from here https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions That width and height attributes is needed, which don't appear, using next/image

How do I solve this?

Downtown

Are you sure the Lighthouse report is referring to that specific image? Can you show us what does that code output on the DOM? – Wifehood

Yes I am sure, it also makes sense, because it doesn't have height and width attributes in the dom – Downtown

I'm facing the same issue here, how did you solve your problem? – Aeriform

I think changing layout from "fixed" to "responsive" solved it, but not sure – Downtown

Answer 1

I am facing the same issue - changing layout to responsive did not solve the problem. It rather looks like the component is missing the rendering of the supporting tags - it should actually be implemented as described in the initial lighthouse link.

Cana

Answer 2

Use curly braces to mention the size instead of string literals. Use layout="responsive"

<Image
  layout="responsive"
  src="/images/example.jpeg"
  alt="Example image"
  width={140}
  height={140}
 />

Petula