Saturday, 15 April 2017

React application tag displays the old (probably cached) image as the url is same

I have a small component in my React application which fetches avatar from backend (nodejs) displays it. The problem is that tag continues to display old image even after i update the avatar.

export default class Avatar extends Component {

  componentDidMount() {
    this.props.getAvatar(this.props.userId)
  }

  render() {
    const { userAvatar } = this.props.users;
    if (userAvatar) {
      return (
        <div class="ui small image">
          <img class="big img" 
            src={ intelliats.server.BASE_URL + userAvatar.img_url } />
          <a onClick={this._changeImage.bind(this)}>
            <i class="write icon"></i> change avatar
          </a>
        </div>
      )
  }
  return (
    <div class="ui small image">
      <img class="big img" 
        src={ intelliats.server.LOCAL_URL + "/imgs/lena.png" } />
      <a onClick={this._changeImage.bind(this)}>
        <i class="write icon"></i> change avatar
      </a>
   </div>
  )
   }
}


via Jagjot Singh

No comments:

Post a Comment