el-image onload触发问题

HonGL54

于 2020-06-29 14:34:22 发布

阅读量2.5k

点赞数 1

分类专栏： vue element 文章标签： js html html5 vue.js css

本文链接：https://blog.youkuaiyun.com/qq_38396070/article/details/107019754

版权

vue element 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在不刷新页面的情况下更新数据的方法，通过给返回的图片URL添加时间戳来避免缓存问题。同时，详细讲解了如何使用Element UI的el-image组件监听图片加载完成事件，从而获取图片的原始尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不刷新页面，只更新数据不触发onload事件，因为缓存，所以给返回的图片加上时间戳 + ‘?_=’ + new Date().getTime()

获取图片的宽高：

<el-image fit="cover" @load="handleLoadImage(row, $event)" :src="row.docUrl"></el-image>

handleLoadImage(row: BannerInfo, event: any) {
  console.log('--------------------------', row)
  const size = `${event.currentTarget.naturalWidth}px * ${event.currentTarget.naturalHeight}px`
  this.$set(row, 'size', size)
}