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>