我有一个简单的商品操作组件。在此组件中,我可以创建商品并更改其图像。当我更改某种商品的图像时,后端应用程序将执行替换具有相同名称的现有图像的操作,因此图像URL不会更改。结果,在刷新页面之前,页面上的图像不会重新加载。
获得成功的服务器响应后如何重新加载强制图像?
这是很好的组件来源:
<template>
<div class="container">
<h3 class="mt-5">Goods</h3>
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header align-middle">
<div class="card-tools">
<button class="btn btn-success btn-sm" v-b-modal.create-good-modal>Add</button>
</div>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-hover text-center">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goods" :key="good.id">
<td class="align-middle">{{ good.id }}</td>
<td class="align-middle">
<img class="img-thumbnail" width="60" :src="goodImageUrl(good.image)"
v-b-modal.change-good-image-modal @click="changeGoodImage(good.id)" />
</td>
<td class="align-middle">{{ good.name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<b-modal ref="createGoodModal" id="create-good-modal" title="New good" hide-footer @show="resetCreateGoodModal"
@hide="resetCreateGoodModal">
<b-form @submit="createGood" class="w-100">
<b-form-group id="form-create-good-name-group" label="Name" label-for="form-create-good-name-input">
<b-form-input id="form-create-good-name-input" type="text" v-model="createGoodForm.name" required
placeholder="Good name">
</b-form-input>
</b-form-group>
<b-form-group id="form-create-good-image-group">
<b-form-file v-model="createGoodForm.image" required :state="Boolean(createGoodForm.image)"
placeholder="Choose good image">
</b-form-file>
<div class="mt-3">Selected image: {{ createGoodForm.image ? createGoodForm.image.name : '' }}</div>
</b-form-group>
<b-button type="submit" variant="primary">Create</b-button>
</b-form>
</b-modal>
<b-modal ref="changeGoodImageModal" id="change-good-image-modal" title="Change good image"
@hide="resetChangeGoodImageModal" hide-footer>
<b-form @submit="updateGoodImage" class="w-100">
<b-form-group id="form-change-good-image-group">
<b-form-file v-model="changeGoodImageForm.image" required :state="Boolean(changeGoodImageForm.image)"
placeholder="Choose good image">
</b-form-file>
<div class="mt-3">Selected file: {{ changeGoodImageForm.image ? changeGoodImageForm.image.name : ''
}}
</div>
</b-form-group>
<b-button type="submit" variant="primary">Save</b-button>
</b-form>
</b-modal>
</div>
</template>
<script>
import {objectToFormData} from "object-to-formdata";
export default {
data() {
return {
goods: [],
createGoodForm: new Form({
name: "",
image: null
}),
changeGoodImageForm: new Form({
id: {},
image: null
})
};
},
methods: {
getGoods() {
axios
.get("goods/list")
.then(response => {
this.goods = response.data;
})
.catch(error => {
console.error(error);
});
},
createGood() {
this.createGoodForm
.post("goods", {
transformRequest: [
function (data, headers) {
return objectToFormData(data);
}
]
})
.then(() => {
this.$refs.createGoodModal.hide();
this.getGoods();
})
.catch(error => {
console.log(error);
});
},
changeGoodImage(id) {
this.changeGoodImageForm.id = id;
},
updateGoodImage() {
this.changeGoodImageForm
.post("goods/" + this.changeGoodImageForm.id + "/image", {
transformRequest: [
function (data, headers) {
return objectToFormData(data);
}
]
})
.then(() => {
this.$refs.changeGoodImageModal.hide();
this.getGoods();
})
.catch(error => {
console.log(error);
});
},
goodImageUrl(filename) {
return "http://127.0.0.1:8098/api/img/goods/" + filename;
},
resetCreateGoodModal() {
this.createGoodForm.reset();
},
resetChangeGoodImageModal() {
this.changeGoodImageForm.reset();
}
},
created() {
this.getGoods();
}
};
</script>
我的建议只是在图像URL后面附加一个随机缓存破坏符-一些无用的查询参数,将迫使浏览器获取新图像。假设您的后端不会拒绝该请求,但是大多数情况下此方法有效。类似于/myimage.png?cacheBuster=<somethingRandom>
。请注意,在下面的代码段中,实际上不会加载新的cat图像,因为该服务器每次都没有新的图像。这只是一个示范。
var app = new Vue({
el: '#app',
data() {
return { imageSource: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/June_odd-eyed-cat_cropped.jpg/120px-June_odd-eyed-cat_cropped.jpg' }
},
methods: {
bustThatCache() {
this.imageSource = `${this.imageSource}?cacheBust=${Math.random()}`
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1> here is a cat picture</h1>
<p>Image Src:{{imageSource}}</p>
<img :src="imageSource"></img>
<button @click="bustThatCache">Load new image</button>
</div>