Vuejs从远程源获取图像

Question

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

问题是它可以工作一次,取一个随机的.但第二次它没有改变..

它没有重新请求它,它只是没有改变它,因为它是我认为的相同的URL.

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 +')';
    }
  }

希望这可以帮助