NextjS Image issue with src and default external image URL

Question

I am using the latest version of NextJS 10.0.9. I've got an Image that I'm trying to display, however I'm receiving the error:

Error: Image with src "https://picsum.photos/480/270" must use "width" and "height" properties or "layout='fill'" property.

As you can see here though, I do have all of those properties set:

<div className="card-img">
  <Image
    alt={media?.title}
    title={media?.title}
    src={media?.previewImage || 'https://picsum.photos/480/270'}
    width={480}
    height={270}
    layout="fill"
  />
</div>

For some reason, it appears that having a default external image doesn't want to play nicely with the Image component. Does anyone know a workaround or reason why this might be the case?

A little side note too: I've got a Typescript error on the layout property that says "Type '"fill"' is not assignable to type '"fixed" | "intrinsic" | "responsive" | undefined'.". I'm not sure if that's related?

Lieu

It's important to note that if you use a fill layout you don't need to specify width or height. I created a sandbox using the image you provided here: codesandbox.io/s/goofy-swirles-5h1si?file=/pages/index.js . Ensure the domain is added to the next.config.js, although I'm assuming you probably have that already or you would be seeing that error. – Durware

Thanks Alex! I knew I was close, just couldn't quite get it right. I ended up keeping layout="fill", and applying height/width to the parent div. The other thing that made this work is I noticed you using the objectFit="cover" property. Thanks again! – Lieu

No problem, yeah, I just added that to ensure it fills the parents space while maintaining aspect ratio, you may not want that for your use case – Durware

Answer 1

If you use layout='fill', you do not need a width and height attribute. The error message isn't completely clear, but that "or" is an exclusive or. You can define the width/height or layout='fill', but not both.

This is a byproduct of how next/image works: the width/height props are used to determine aspect ratio, not necessarily display size.

Since layout='fill' means "stretch to fill the parent element", the width and height are meaningless. So to fix the error, either remove layout='fill', or remove the dimensions.

---

You've probably already seen this, but here are the docs just in case: https://nextjs.org/docs/api-reference/next/image

Famished

Awesome, that makes a ton of sense now. Not sure why I was struggling to understand the docs so much! I ended up keeping layout="fill", and applying height/width to the parent div. The other thing that made this work is I added the objectFit="cover" property. Thanks again! – Lieu

Answer 2

For others who may have come across this page but not quite found the answer that they are looking for I would also like to highlight that the width and height props of the Next 'Image' component do not accept decimals. This is quite easy to overlook as the error message does not make any reference to prop format.

Caelum