ReactJs: Refresh img tag after image update where url remains constant but the image from that url changes

In my app, when user changes image, the url of the image remains the same, but the image in the cloud changes.
In other words, suppose the url of the image is URL1, after the user uploads his image, the image retrieved from that url changes, but the URL remains the same.

The problem with this is that React does not detect the change, and so does not refresh the image tag automatically, and I have to refresh the page, in order to see the new image.

Here's my code:

class ProfilePage extends Component {
  saveImageUrlInDatabase(profileImageURL) {
    const imageData = {
      profileImageURL: profileImageURL,
    };
    this.props.uploadProfilePictureURL(imageData);
  }

  async updateAvatar(event) {
    const imageFile = event.target.files[0];
    if (!imageFile) {
      return;
    }
    const imageURL = await this.props.uploadProfileImage(imageFile);
    this.saveImageUrlInDatabase(imageURL);
    this.setState({
      profileImageURL: imageURL,
    });
  }

  render() {
    const { profile, loading } = this.props.profile;

    if (!profile || loading) {
      profileContent = <Spinner />;
    } else {
      // #BUG: Even though profileImageSrc changes
      // It doesn't get update automatically

      // It turns out the url does not change
      // But, the image does change
      let profileImageSrc;
      // True if user has updated his image
      if (this.state.profileImageURL !== "") {
        profileImageSrc = this.state.profileImageURL;
      } else {
        profileImageSrc = !profile.profileImageURL
          ? require("assets/img/faces/lofi-girl.png")
          : profile.profileImageURL;
      }

      profileContent = (
        <Container>
          <div className="owner">
            <div className="avatar">
              <Label for="avatar-upload">
                <img
                  alt="..."
                  className="img-circle img-no-padding img-responsive"
                  src={profileImageSrc}
                  key={Math.floor(Math.random() * 10)}
                  style={{
                    cursor: "pointer",
                  }}
                  title="Change profile image"
                />
              </Label>

              <input
                id="avatar-upload"
                type="file"
                accept="image/*"
                style={{ display: "none" }}
                onChange={this.updateAvatar}
              />
            </div>
          </div>
        </Container>
      );
    }
    return <div className="section profile-content">{profileContent}</div>;
  }
}

Any idea how to solve this?



Read more here: https://stackoverflow.com/questions/65881655/reactjs-refresh-img-tag-after-image-update-where-url-remains-constant-but-the-i

Content Attribution

This content was originally published by Ahmed Ghrib at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: