Next.js: [Next 10][Next/Image] displayed image did not change when changed 'src' prop. (With Incremental Static Regeneration)

Created on 6 Nov 2020  ·  2Comments  ·  Source: vercel/next.js

Bug report

Describe the bug

When using Incremental Static Regeneration(getStaticProps and getStaticPaths),
And using <Image> components,
Then I moved pages clicked by <Link> components, then 'src' prop was changed, but actually displayed image was not changed.

When changed src prop, that displayed image was NOT changed

<Image src={article.imageUrl} width={150} height={150} alt='test'></Image>

The solution is specify 'key' props.

When changed src prop, that displayed image was changed!

<Image key={article.imageUrl} src={article.imageUrl} width={150} height={150} alt='test ok'></Image>

To Reproduce

Reproduce repo is here:
https://github.com/TeXmeijin/Nextjs10-reproduce-image-component-bug

yarn
yarn dev

Go to '/article/1' and '/article/2' and move to each other by <Link> component's anchor links.

Then first image was not changed, but second image was changed.

Is it Next's expected specification? I don't want set 'key' prop to all <Image> components.

For details, see this code:
https://github.com/TeXmeijin/Nextjs10-reproduce-image-component-bug/blob/main/pages/article/%5Bid%5D.js

Expected behavior

Change displayed image when NOT using 'key' props.

Screenshots

スクリーンショット 2020-11-06 22 56 26
スクリーンショット 2020-11-06 22 56 22

System information

  • Next.js v10.0.1

Additional context

bug

Most helpful comment

This has been fixed on next@^10.0.2-canary.4.

All 2 comments

I just encountered the exact same bug and can verify that the key workaround solves the problem for now.

This has been fixed on next@^10.0.2-canary.4.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Knaackee picture Knaackee  ·  122Comments

timneutkens picture timneutkens  ·  250Comments

arunoda picture arunoda  ·  103Comments

dunika picture dunika  ·  58Comments

Timer picture Timer  ·  60Comments