Issues with new next/image component

[johnbrett]

Bug report

Describe the bug

I used the image component as a drop-in replacement for img, but encountered the following issues:

1. I had to add a key prop, that added src again as the key. If I did not do this, and I have a series of images in a list, when the list updates the images would not change, and would remain as the previous images. Adding the key prop fixed this, I believe the Image component should do this internally.
2. Image sizing became a problem. I use the clearbit logo API, and I can't guarantee the size of the images, they aren't always square, despite my showing them in a square context. I have CSS to get this to display correctly - this worked with img, but not with Next.js image. I used the following CSS to fix this issue, where company-logo is the parent container of the image:

.company-logo div div {
  padding-bottom: 0 !important;
}

.company-logo img {
  left: unset !important;
  position: unset !important;
  top: unset !important;
}

To Reproduce

Issue 1:

1. Make a list that has images
2. create an action that replaces the content & images with new content & images, like some sort of filter
3. Notice the content updates, but images do not.

Issue 2:

1. With an img component, try display logos from the clearbit logo API (or images that are not square) consistently, which will involve some css. Replace img with next/Image, and notice your logos will no longer display correctly.

Expected behavior

I expected when I replaced the img component with Next/Image everything would work as expected (my understanding may be wrong here! If so that's totally ok - the component is still awesome, and great work by everyone involved! Just adding these usage experiences as helpers!

Screenshots

Issue 1:

Bad without key fix:

Good with key fix:

Issue 2:
Without css overrides:

With css overrides:

System information

• Browser (if applies) [chrome]
• Version of Next.js: [10]

Additional context

While the code for this is not open source, I'm happy to add contributors to the codebase or share snippets of code as much as possible to highlight issues, or test the fixes work.

Great work on this component and everything in next.js 10! with the fixes I've used, everything is working really well.

[Timer]

We're trialing some changes to next/image right now that should make using it much easier. Could you reach out to me on twitter so we can try this on your app? Thanks!

[lachlanjc]

#18369 is tracking the key issue & #18344 is tracking the CSS (#18499 dup) by the way!

[Timer]

User verified next@canary fixes it. We'll track the key issue in #18499!

[Jaynam07]

next/image - facing issue in production env, images are getting 504 timeout error

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.