CODEWITHSUNDEEP
next.jsnextjs-image
J. Jackson
J. Jackson

Reputation: 3774

NextjS Image issue with src and default external image URL

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?

Upvotes: 5

Views: 16422

Answers (2)

David A. Nugent
David A. Nugent

Reputation: 21

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.

Upvotes: 1

Nick
Nick

Reputation: 6422

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

Upvotes: 6

Related Questions