Vuejs get image from remote source

Question

I'm using the following code to detect a button click, and get an image from unsplash which features a random mode.

The problem is it works one time, to fetch a random one. But the second time it's not changing..

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

I tried erasing the variable

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

But still no success, Any ideas?

Ricardo · Accepted Answer · 2016-02-05 12:09:51Z

8

You can try to make some cache braking. I think that it is your browser that is caching the request and serving you with the same image. Try to append a random string at the end of the request like this:

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

Hope this helps

edited Feb 5, 2016 at 12:09

answered Feb 5, 2016 at 11:22

Ricardo

1241 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel Stevens Over a year ago

This is working perfectly! Didn't think of that. thank you!

Collectives™ on Stack Overflow

Vuejs get image from remote source

I tried erasing the variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

I tried erasing the variable

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related