Vue.js 动态重载 Image 的 src

【问题标题】：Vue.js dynamic reload src of ImageVue.js 动态重载 Image 的 src
【发布时间】：2020-12-14 04:01:46
【问题描述】：

我在服务器中有一个图像更改但没有更改名称所以我想在 vuejs 中重新加载源而不刷新页面，这是我的Vue：

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

【问题讨论】：

【解决方案1】：

当您更改 src 时，图像将重新加载。您可以保持源原样，但在 src 中添加一个缓存键。

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

并在您的脚本中添加以下内容：

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

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

【讨论】：