Vuejs 从远程源获取图像

Question

我正在使用以下代码来检测按钮点击，并从具有随机模式的 unsplash 获取图像。

问题是它只工作一次，随机获取一个。但是第二次它没有改变..

It's not re-requesting it, it's just not changing it because it's same URL I think.

var vue = new Vue({
  el: '#app',
  data: {
    styleObject: {
        background: 'url(https://unsplash.it/1920/1080)'
    }
  },
  methods: {
    getImage: function() {
        vue.styleObject.background = 'url(https://unsplash.it/1920/1080?random)'
    }
  }
})

我尝试擦除变量

getImage: function() {
    vue.styleObject.background = '';
    vue.styleObject.background = 'url(https://unsplash.it/1920/1080?random)'
}

但仍然没有成功，有什么想法吗？谢谢

Answer 1

您可以尝试做一些缓存制动。我认为是您的浏览器在缓存请求并为您提供相同的图像。尝试在请求末尾附加一个随机字符串，如下所示：

 methods: {
    getImage: function() {
        var max = 90000;
        var min = 10000;
        var slug = Math.random() * (max - min) + min;
        vue.styleObject.background = 'url(https://unsplash.it/1920/1080?random&s=' + slug +')';
    }
  }

希望对您有所帮助

Vuejs 从远程源获取图像

Vuejs get image from remote source

javascript

api

fetch

vue.js

我尝试擦除变量