How to prevent that v-img was called when refreshing the page?-CodePudding

The problem-

As the title mentioned, I try to call the image only once, even I refresh the same page because that's the same image.

My code-

<template>
  <v-img>
    height="450"
    src="https://images.pexels.com/photos/10480463/pexels- 
    photo-10480463.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    lazy- 
    src="https://images.pexels.com/photos/10877192/pexels-photo-10877192.jpeg"
    
    alt="001"
  </v-img>
</template>

Addition to the quesiton-

If you fetch images from store, use asyncData can do the same.

CodePudding user response：

If you want to stop the re-rendering of this image element when the Vue component updates then you can use the v-once directive.
v-once make sure the element will not be re-rendered after it has been rendered initially, so when Vue.js processes data changes, it will simply ignore the element. This can be used to optimize update performance.

<template>
  <v-img v-once src="https://picsum.photos/200/300"></v-img>
</template>

Now, for page reload case, I assume your concern is the performance. So, you can cache the images for fast loading. Here is a guide to use cache in the Vue.