js和vue的图片加载完成事件

我的场景：需要图片在加载完成之后，获取图片的高度，给别的组件传值

语法：onload 事件在图片加载完成后立即执行

可以使用img的onload事件，等图片加载完成之后再执行其他操作
js

<body><imgsrc="xxx"onload="getImg()"><script>function getImg() {console.log('需要执行的操作');}</script>
</body>
执行: // 需要执行的操作

vue
部分代码如下：

 <imgid="profileImg":src="imgSrc"class="profile-img"@load="loadImage">...data() {return {imgSrc: '',imageWidth: 0};},methods: {// 获取图片的宽度getImageWidth() {let imgWrapper = document.getElementById('profileImg');this.imageWidth = imgWrapper.offsetWidth;},loadImage() {if (this.imgSrc !== '') {this.getImageWidth();}}}

js和vue的图片加载完成事件相关推荐

vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
Vue 在图片加载过程中遇到的问题
今天在编写 Vue 项目时,遇到了一个图片加载问题,觉得还是蛮重要的,所以记录一下我之前一直以为 Vue 生命周期中的 mounted 是等所有资源加载完毕之后,再来执行,但是今天我在 mouten ...
【vue】图片加载动画效果
加载后,一种是图片由浅到深.一种是闪光加载效果消失. <template><imgcrossorigin="anonymous":src="imgSrc ...
Vue中图片加载问题总结
1. favicon.ico 504问题注意,由于更改的是配置文件,所以需要重新npm run dev运行该项目. 2. 图片引用加载不出来 vue中常见的两种图片引用方式如下: 直接img标签的s ...
VUE打包图片加载失败问题
昨天的搬运工,今天的小雷锋. 问题描述,使用VUE-CLI打包后,出现图片无法显示情况.这里可能存在两种情况: 静态资源CSS中使用图片作为背景图片使用时. 在JS中生成图片标签后,再设置图片路径时. ...
vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件. 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然 ...
vue图片加载完成前增加loading效果
这次给大家带来vue图片加载完成前增加loading效果,vue图片加载完成前增加loading效果的注意事项有哪些,下面就是实战案例,一起来看一下. 如下所示: 1 2 3 4 5 6 7 8 9 ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
vue 动态获取的图片路径不显示_Vue 动态图片加载路径问题和解决方法
最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面 ...

js和vue的图片加载完成事件

js和vue的图片加载完成事件相关推荐

最新文章

热门文章