React img not immediately changing when src changes. How can I fix this?

Just add key attribute to your image tag and assign some unique value to key attribute like image source.

<img src={image_source} key={image_source}></img>

Made my own workaround.

I believe because react isn't mounting a new component (i.e. <img>), it's not going to update to the new image until it's finished loading.

What I did was check if the src changed in componentDidUpdate and change the status to LOADING. Then I set img style to display: none while its status was LOADING.

EDIT: Also, by manually setting my own key, I can force React to re-render the <img>