强制img从同一URL重新下载

Question

我正在使用此API中随机生成的图片：http://loremflickr.com/320/240

当应用程序启动时，它会使用该链接获取随机图像。

当我点击一个按钮时，我想通过设置img src来更新图像 - 但是URL是相同的，所以浏览器看到相同的链接所以不会调用api，所以一个新的随机图像尚未生成。

这是html代码：

<img style="float:right;position: relative;top: 50%;transform: translateY(-50%);" src="{{gifLoader}}"/>

该按钮有一个调用此功能的点击事件：

nextImg()
  {
    this.gifLoader = "http://loremflickr.com/" + window.screen.width + "/" + window.screen.height;
  }

Answer 1

尝试添加查询参数，例如时间戳。由于时间戳每次被视为新请求时都会有所不同，每次更新img src

时都会收到新图片

this.gifLoader = "http://loremflickr.com/" + window.screen.width + "/" + window.screen.height +"?timestamp=" + new Date().getTime();

希望这会有所帮助：）

Answer 2

您可以尝试缓存破坏程序，如下所述： -

＆＃34; http://loremflickr.com/320/240?rnd=＆＃34; + (new Date()).getTime()