前端显示后端返回的两张相同链接的图片有页面缓存的处理

问题

Q： 前端显示一张图片，该图片可被重新上传, 后端存储时全部命名为【/照片.jpg】。
当重新上传该图片时，请求详情接口后被更新的图片字段名称返回依旧是【/照片.jpg】，此时页面图片不更新，仍是未更新前的图片，重新刷新页面后图片更新。
如何使页面不刷新就更新图片？

解答

A： 发生问题的原因是浏览器缓存，两张图片的内容不同但是名称一样，浏览器会认为依旧是未更新前的图片。
解决方法: 将标签的【src】属性清空，然后重新赋值。

html部分：

      <img :src="url" alt="">

js部分：

    // url 为img标签src的绑定值
    // res 为接口返回, res.data.url为接口返回的图片字段链接
    // vue环境, 原生写法自行修改
    this.url = '';    // 将src的值清空
    this.url = res.data.url;  // 将src重新赋值