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

最新推荐文章于 2024-05-26 14:39:23 发布
最新推荐文章于 2024-05-26 14:39:23 发布
阅读量961 收藏 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
    评论
el-image动态数据返回 图片加载失败问题
weixin_45108907的博客
02-04 1979
问题： 动态返回的数据，回显图片加载失败，使用了懒加载也不行，异步加载没有刷新 解决： 使用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.
清除图片缓存
guoyule2010的专栏
04-29 846
​- (void)setupGroup1 {     // 1.创建组     LKCommonGroup *group = [LKCommonGroup group];     [self.groups addObject:group];          // 2.设置组的所有行数据      LKCommonArrowItem *clearCache
el-dialog中放置img图片不能实时刷新的问题
天干物燥
08-05 1477
今天在做页面的时候发现一个问题，我在el-dialog中放置了一个<img>标签，并绑定了一个变量，然而在弹窗中直接给src赋值的时候图片不能直接显示出来，需要关闭在开启弹窗才会出现。解决办法就是加上this.$forceUpdate()；强制更新试图。源码以后在研究。写个小例子。 template <template> <el-dialog> <img :src="pic"/> <el-dialog/> &l
对图片image进行双缓存
天龙的博客
01-08 944
对网络图片下载，并显示在相对应的控件上，为了避免重复连网下载，可以对相应的图片进行双缓存设计，节省时间和流量 设计罗辑 当app启动后，如果控件需要显示网络图片，首先从自己的内存缓存读取，如果没有，再从自己的磁盘缓存读取，再没有，直接上网下载（下载时按照要显示的比例下载保存图片，不用下原图），下载好图片后，保存到内存缓存和磁盘缓存中，当下次需再重新加载图片时，又重新按照加载顺序一一读取，如果读
el-image图片更新不及时的问题
网易游戏真辣鸡
06-30 2331
前言 在写一个更新图片的功能时发现这么一个问题，我通过后端把图片文件重写了，但是前端刷新一下，图片还是没有改变，在我盯着这个问题看了三十分钟后，这段代码害怕了，给我脑波传授了一种方式 方法 因为浏览器自带缓存的问题，导致相同名称的资源会从缓存中寻找（可能是），导致图片未更改，一般需要强制刷新或者清空缓存才行（chrome） 所以需要给路径加一个随机数，骗浏览器这是不同的资源 this.imageUrl = "/static/"+this.DeviceCode+".png?v="+Math.random();
element-plus 中 el-image请求相同图片路径，页面不刷新
huangzhi_的博客
05-19 534
因为浏览器缓存原因导致，服务器图片更新后，由于页面请求路径相同，浏览器会访问缓存资源导致页面图片不能即使刷新。
element-ui el-image 第一次加载图片失败，第二次不刷新的问题
yangchuangxyz的博客
09-03 4685
最近使用elementUI的el-image发现经常会出现加载src失败的情况，问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新，有两个解决办法： 1.给:src设置默认值，避免图片加载失败的情况 2.加v-if判断:src中的value值是否为空或者:src的key值是否存在，是则加载图片，否则不加载 ...
Vue使用elementUi的el-image图片初始化加载失败！
weixin_43422861的博客
08-02 3919
原因是el-image的 :src="imageData.src" 在初始化时，图片路径由接口返回还未加载数据导致的问题，且第一次渲染失败不会再异步刷新。 解决办法： 在el-image中加上 v-if=“imageData.src !== undefined” 判断，不是后端返回的话直接 src 处路径写死。 ...
Vue Element采坑日记之图片上传后不及时更新视图
Haines
09-17 1668
修改前 async upLoadImage(e) { //图片的文件信息 let file = e.file; //借助FormData对象上传文件 let formData = new FormData(); //FormData携带图片对象 formData.append("file", file); //请求接口 图片对象以二进制流的方式传递 let res = await this.$http.u
elementplus 中el-image清空缓存
05-09
在 Element Plus 的 el-image 组件中，可以使用 `prevent-cache` 属性来禁止缓存图片。当 `prevent-cache` 属性被设置为 `true` 时，每次加载图片时都会添加一个时间戳来避免缓存。 示例代码： ```html <el-image ...
el-image更新不及时
09-06
el-image更新不及时的原因可能是由于缓存的问题。当后端重写图片文件时，前端可能会使用缓存的图片而不是新的图片。为了解决这个问题，你可以在URL中添加一个随机参数或者修改图片URL，这样可以确保每次获取的都是...
el-image显示网络图片
03-27
需要注意的是，el-image 组件默认会将图片缓存到本地，以提高加载速度。如果需要禁用缓存，可以设置 no-cache 属性为 true。例如： ``` <el-image src=...
elementui table 里套el-image 列表数据过多导致图片无法加载
weixin_42400319的博客
07-27 537
如果加了lazy就出现图片空白。
利用 element-ui 中 el-image 组件实现，图片正在加载时的动画
weixin_46002095的博客
04-02 675
【代码】利用 element-ui 中 el-image 组件实现，图片正在加载时的动画。
el-image实现旋转修改保存+浏览器缓存图片实时更新
敲代码无敌小奶龙的博客
04-08 545
el-image实现旋转修改保存
使用el-image返回了图片地址，但闪烁一下就不显示问题解决
最新发布
Zach1Lavine的博客
05-26 267
解决element中el-image返回图片地址，但闪烁一下又不显示的问题
el-image开启懒加载或使用vue-lazyload有时候图片懒加载无效，一定要页面滚动才会展示
山有木兮木有枝 心悦君兮君不知
10-13 6732
问题场景： 在一个列表中，用el-image来显示图片，并开启懒加载，但前面的图片（如列表的第一、二张图片）需要页面滚动才会显示，明明图片是在浏览器的可是窗口内。 解决方案： 这一般是因为在v-for遍历的时候，:key被设置成了index下标 <ul> <li v-for="(item,index) in imgList" :key="index"> // 这里如果key的值是index， 那每次分页,key的值就又是从0开始 <img
＜img＞ 标签src缓存问题
Shawn的个人博客
04-30 4582
问题描述： 最近在使用vue做目标检测算法可视化的时候发现了一个问题，我在前端传入原始图片到后端，经过后端算法检测后生成检测图片，前端vue直接调用该图片路径。本来想着输入不同图片，后端会不断覆盖result.jpg，最终前端也会实时变化，但是最终结果出现了意外，如图后连输入图不管如何变化，结果图都是同一张图片。 //html部分 <el-image class="originImg" :src="resulturl"/> //js部分 this.resulturl="http://localh
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值