Next.js: [next/image] Image doesn't update on page change

[PolMrt]

Bug report

Describe the bug

I'm currently building a website that shows information about tv shows. In the tv show page, when can see all information such as pictures, name, etc. When clicking on a similar tv show, next/link redirects to the correct page, the title updates but the images stay the same, they never update. I need to _hard reload_ the page to see image change.

To Reproduce

(Reproducing will not longer work since I implement the fix on my website, refer to the video below to see the bug)

1. Go to soononnetflix.vercel.app
2. Click on any show, for exemple this one
3. Scroll down to 'similar tv shows' and click on one.
4. You'll see the cover image stay the same as the previous one.

This project is not open sourced but if you got issues to reproduce the bug, I'll make a little repository to help you reproduce it.

Expected behavior

It should update to the correct image that match the show. Reload the page in your browser to see the right images.

Screenshots

I've made this video that shows the bug.

System information

• OS: macOs
• Browser : chrome
• Version of Next.js: 10.0.0
• Version of Node.js: 12.13.0

[dkodeit]

Ran into this same issue and only when I attempt to use the image component with dynamic routes. The alt and srcset updates fine but not the src when navigating. Tried generating routes with markdown, then json with the same results.

[miguelmoya1]

I have the same problem, I solved it by adding a unique key to the images. It works for me.

[PolMrt]

Thanks, adding a key props to the Image component makes it update !

[onderonur]

I have this exact same bug too. At first I thought it was caused by shallow routing but it was not.
Using src as key prop solves this for now.

[petertenhoor]

Same issue. Can confirm that using a key prop fixes it 👍

[Elia-Darwish]

I am also having the same problem inside dynamic routes!

[raphaeljoer]

All right! Thank you guys... same problem, but the key resolution works for me!