Vue.js dynamic reload src of Image

Question

I have an image changes in the server but without changing the name so I want to reload the source in vuejs without refreshing the page, This my vue :

<template>
    <div class="container">
        <img src="http://localhost:8082/files/file.jpeg">
    </div>
</template>
<script>
</script>

This might be helpful. https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working — Abarth, Aug 25 '20 at 13:44

score 0 · Answer 1 · answered Dec 14 '21 at 10:11

When you change the src the image will reload. you can keep the source as is but add a cache key to the src.

<template>
    <div class="container">
        <img 
          :src=`${imageURL}?cache=${cacheKey}`>
    </div>
</template>

and in your script add the following:

data() {
 return {
      cacheKey: 1,
      imageURL: 'http://localhost:8082/files/file.jpeg'  
 }
}

updateImgMethod(){
 const nowTime = +new Date()
 this.cacheKey = nowTime
}

Vue.js dynamic reload src of Image

1 Answers1