Vue中通過使用img標(biāo)簽來加載圖片,實際上是通過v-bind綁定img標(biāo)簽中的src屬性來實現(xiàn)。當(dāng)src屬性的值發(fā)生變化時,img標(biāo)簽會重新加載新的圖片。在開發(fā)Vue項目中,有時我們需要實現(xiàn)圖片刷新的功能,以保證所加載的圖片展示的始終是最新的版本。
那么應(yīng)該如何實現(xiàn)圖片的刷新呢?一種常見的方法是通過在img標(biāo)簽中添加一個隨機數(shù)參數(shù)來強制更新src屬性的值,從而實現(xiàn)圖片的刷新。具體代碼如下:
<template> <img :src="imgSrc" :key="imgKey" /> </template> <script> export default { data() { return { imgSrc: '/image/demo.png', imgKey: '', } }, methods: { refreshImg() { this.imgKey = Date.now() } }, } </script>
在上述代碼中,我們定義了一個imgSrc屬性用于綁定img標(biāo)簽的src屬性,和一個imgKey屬性。當(dāng)調(diào)用refreshImg方法時,將imgKey屬性的值設(shè)為當(dāng)前時間戳,于是img標(biāo)簽會重新加載圖片。
在實際開發(fā)中,我們可以在需要刷新圖片的地方調(diào)用refreshImg方法即可完成圖片的刷新。