el-image 图片存在缓存，页面未及时更新图片

于 2023-12-11 17:17:50 发布
阅读量715 收藏 11
点赞数 7
文章标签： 缓存 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/takeki_/article/details/134932036
版权

问题：:src是从后端接口拿到的最新图片地址，页面显示的是上一张图片

解决：添加一个时间戳或随机数来确保每次请求的URL都不同，从而避免缓存

<el-image
    style="width: 300px; height: 300px"
    :src="item.pred_staticimage + '?' + Date.now()" // 修改后的代码
    :preview-src-list="[item.pred_staticimage + '?' + Date.now()]"
>
</el-image>

将雨.
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JAVA工具类
08-18
LruCacheUtils - 基于LinkedHashMap实现LRU缓存的工具类 MemcachedUtils - 基于memcached的工具类 RedisUtils - 基于redis的工具类，与redis的集群配置无缝结合 db JdbcUtils - 操作jdbc的工具类 MongodbUtils - ...
element-ui el-image 第一次加载图片失败，第二次不刷新的问题
yangchuangxyz的博客
09-03 4407
最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新，有两个解决办法： 1.给:src设置默认值，避免图片加载失败的情况 2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图片，否则不加载 ...
el-image图片更新不及时的问题
网易游戏真辣鸡
06-30 2198
前言 在写一个更新图片的功能时发现这么一个问题，我通过后端把图片文件重写了，但是前端刷新一下，图片还是没有改变，在我盯着这个问题看了三十分钟后，这段代码害怕了，给我脑波传授了一种方式 方法 因为浏览器自带缓存的问题，导致相同名称的资源会从缓存中寻找（可能是），导致图片未更改，一般需要强制刷新或者清空缓存才行（chrome） 所以需要给路径加一个随机数，骗浏览器这是不同的资源 this.imageUrl = "/static/"+this.DeviceCode+".png?v="+Math.random();
element-plus 中 el-image请求相同图片路径，页面不刷新
huangzhi_的博客
05-19 426
因为浏览器缓存原因导致，服务器图片更新后，由于页面请求路径相同，浏览器会访问缓存资源导致页面图片不能即使刷新。
el-dialog中放置img图片不能实时刷新的问题
天干物燥
08-05 1414
今天在做页面的时候发现一个问题，我在el-dialog中放置了一个<img>标签，并绑定了一个变量，然而在弹窗中直接给src赋值的时候图片不能直接显示出来，需要关闭在开启弹窗才会出现。解决办法就是加上this.$forceUpdate()；强制更新试图。源码以后在研究。写个小例子。 template <template> <el-dialog> <img :src="pic"/> <el-dialog/> &l
el-image动态数据返回 图片加载失败问题
weixin_45108907的博客
02-04 1915
问题： 动态返回的数据，回显图片加载失败，使用了懒加载也不行，异步加载没有刷新 解决： 使用v-if，图片存在时再渲染 <el-image style="width: 100px; height: 100px" lazy v-if="add_form_dialog.img" :src="add_form_dialog.img" :preview-src-list="[add_f.
Vue使用elementUi的el-image图片初始化加载失败！
weixin_43422861的博客
08-02 3701
原因是el-image的 :src="imageData.src" 在初始化时，图片路径由接口返回还未加载数据导致的问题，且第一次渲染失败不会再异步刷新。 解决办法： 在el-image中加上 v-if=“imageData.src !== undefined” 判断，不是后端返回的话直接 src 处路径写死。 ...
java开源包5
06-28
Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码图片。 Java 命令行解析...
java开源包1
06-28
Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码图片。 Java 命令行解析...
java开源包10
06-28
Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码图片。 Java 命令行解析...
JAVA上百实例源码以及开源项目
01-03
　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
JAVA上百实例源码以及开源项目源代码
12-11
Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰效果 Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、...
java开源包11
06-28
Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码图片。 Java 命令行解析...
java开源包2
06-28
Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 (<jcaptcha:image label="Type the text "/> ) 即可，直接在 struts.xml 中进行配置，使用强大的 JCaptcha来生成验证码图片。 Java 命令行解析...
Vue Element采坑日记之图片上传后不及时更新视图
Haines
09-17 1547
修改前 async upLoadImage(e) { //图片的文件信息 let file = e.file; //借助FormData对象上传文件 let formData = new FormData(); //FormData携带图片对象 formData.append("file", file); //请求接口 图片对象以二进制流的方式传递 let res = await this.$http.u
清除图片缓存
guoyule2010的专栏
04-29 821
​- (void)setupGroup1 {     // 1.创建组     LKCommonGroup *group = [LKCommonGroup group];     [self.groups addObject:group];          // 2.设置组的所有行数据      LKCommonArrowItem *clearCache
el-image开启懒加载或使用vue-lazyload有时候图片懒加载无效，一定要页面滚动才会展示
山有木兮木有枝 心悦君兮君不知
10-13 6284
问题场景： 在一个列表中，用el-image来显示图片，并开启懒加载，但前面的图片（如列表的第一、二张图片）需要页面滚动才会显示，明明图片是在浏览器的可是窗口内。 解决方案： 这一般是因为在v-for遍历的时候，:key被设置成了index下标 <ul> <li v-for="(item,index) in imgList" :key="index"> // 这里如果key的值是index， 那每次分页,key的值就又是从0开始 <img
el-image onload触发问题
HonG
06-29 2187
因为缓存原因，所以给返回的图片加上时间戳 + ‘?_=’ + new Date().getTime()
el-image图片下载
最新发布
12-20
根据提供的引用内容，以下是关于el-image图片下载的介绍和演示： el-image是Element UI中的一个组件，用于显示图片。要实现el-image图片下载，可以通过改造封装imageprint组件来实现。 首先，在Vue组件中引入el-image和imageprint组件： ```javascript import imageprint from '@/components/imageprint' import { Image } from 'element-ui' export default { components: { imageprint, 'el-image': Image }, // ... } ``` 然后，在模板中使用el-image和imageprint组件，并传入相应的属性： ```html <imageprint :src="tem.link" :imglist="imglist"></imageprint> ``` 接下来，根据需求，改造封装imageprint组件，添加图片旋转和下载的功能。可以使用HTML5的canvas来实现图片旋转，然后使用a标签的download属性来实现图片下载。 在imageprint组件的方法中，添加旋转和下载的方法： ```javascript methods: { rotateImage() { // 图片旋转逻辑 // ... }, downloadImage() { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') const img = new Image() img.src = this.src img.onload = () => { canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0) canvas.toBlob((blob) => { const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'image.png' link.click() URL.revokeObjectURL(url) }) } } } ``` 在模板中添加旋转和下载按钮，并绑定对应的方法： ```html <template> <div> <el-image :src="src"></el-image> <button @click="rotateImage">旋转图片</button> <button @click="downloadImage">下载图片</button> </div> </template> ``` 通过以上改造，就可以实现el-image图片的旋转和下载功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值