Question

这是我正在处理的一个小项目：https://codesandbox.io/embed/rwxookx6po。

我有几个具有backgroundImage属性的div。我输入的网址是以下网址：https://source.unsplash.com/collection/1163637/480x480

每次访问该URL时，都会从集合中获得一个新的随机图像。我以为因为道具没有改变，所以我可以强迫组件进行更新，但这似乎并不能解决问题：

shouldComponentUpdate(nextProps) {
    if (nextProps.image) {
      this.forceUpdate();
      return true;
    }
  }

鉴于我按下一个按钮，然后将相同的图像URL属性传递给包含具有背景图像的div的组件，如何重新加载该组件，为div提供新的图像背景？

Answer 1

这是一个完整的技巧，但是我认为问题在于浏览器正在缓存请求的结果，因此不再通过替换来再次进入url

const imageURL =`https://source.unsplash.com/collection/1163637/$ {width} x $ {height}？random = $ {Math.random（）}`;

现在可以使用了。（请注意，网址更改它提供的图像大约需要5秒钟的时间）

Answer 2

您可以将时间戳添加到updateImage方法中，如下所示：

updateImage() {
  const width = 480;
  const height = 480;
  const timestamp = Date.now();
  const imageURL = `https://source.unsplash.com/collection/1163637/${width}x${height}?t=${timestamp}`;
  return this.props.updateImage(imageURL, width, height);
}

如何强制刷新图像

2 个答案: