Image does not refresh if preload is true

[davidvedvick]

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

2.1.17

Description

If preload is true on an <Image> component, it will not update the image if the src attribute is updated. This is especially problematic if navigation is managed by a library like React Router, which will re-use existing components, but, as proven by a unit test, will happen anywhere that src is set by a property.

Example Code with non-updating Image tag (edited for brevity and clarity):

function PureComponent(props: { imgSrc: string }) {

  return (<Image
    alt={'Job Image'}
    src={props.imgSrc}
    preload
    preloader={<ImageLoading />}
    error={<Error />}
  />);
}

Steps to Reproduce

1. Add an <Image> component to a view which is rendered by React Router
2. Try setting the src attribute using a dependency on a property.

Expected behavior: [What you expected to happen]

When src is updated, the new image should load.

Actual behavior: [What actually happened]

When src is updated, nothing happens.

Environment details: [OS, Browser, ...]

Verified on Edge 111.0.1661.62, Chrome 112.0.5615.49.

Possible Solution

I will post a fix shortly.