I am using vue and vuex where i get the image of a profile in this way i use quasa
I need to be able to update the image since it contains one that was previously loaded, I can't do it since the browser seems to have it loaded and caches it.
Note:
cropSuccess
It is the method in charge of uploading the image
<q-item-section avatar>
<q-avatar
size="80px"
color=""
text-color="white"
class="shadow-2 bg-deep-orange-2"
>
<q-img
ref="logos"
:src="logo"
spinner-color="white"
style="min-height: 80px"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center"
style="background-color: #cccc"
>
<q-avatar
color="grey"
text-color="white"
icon="image"
/>
</div>
</template>
</q-img>
</q-avatar>
</q-item-section>
export default {
computed: {
logo() {
return (
`/storage/business/${this.business.business_id}/logo_${this.business.business_id}.png`
);
},
},
methods: {
cropSuccess(data, field, key) {
this.$store.commit("auth/CHANGELOGO", data);
this.$store.state.simulator.refresh++;
},
}
}
An option to prevent the browser from searching for the image in its cache is to add
URL
thetimestamp
viaquery param
Example:
Each time the code is executed, the variable
t
will have a new value, which to the browser means a newURL
.Note: This strategy is not recommended for the
front-end
public, since it prevents caching and causes the image to have to be downloaded each time the page is visited.