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>
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
Change displayed image when NOT using 'key' props.


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.
Most helpful comment
This has been fixed on
next@^10.0.2-canary.4.