Question

我的React应用程序中有一个小组件，它从后端（nodejs）获取头像显示它。问题是即使我更新了头像，标签仍会继续显示旧图像。

＆＃13;

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>
  )
   }
}

＆＃13;

Answer 1

我明白了。最好的方法是在后端生成一个随机数并将其附加到图像网址。对于例如http://www.yourdomain.com/img/yourimage.jpg?ver=387565675。因此，每次数字更改反应都会显示新图像。

React application <img/>标记显示旧的（可能是缓存的）图像，因为url是相同的

1 个答案: