vue获取不到页面图片实际宽高
在某些情况下需要页面图片的宽高,使用Image获取加载图片获取图片宽高时为0,是因为图片未加载完返回宽高为0
如果未获取到宽高需要使用定时器定时获取图片,直到获取到后再清除定时器
示例代码:
// new一个图片实例对象
var img = new Image();
let timer = "";
// 设置图片初始宽高为0
let width = 0;
let heifht = 0;
// 使用定时器定时获取图片的高度或者宽度
timer = setInterval(() => {
img.src = this.images[this.index]; // 图片地址示例
// (1)如果值为0说明还没加载回来,不执行任何操作,让定时器再次执行
// (2)如果值不为0说明已经加载回来了,清除定时器,然后执行接下来的操作
if (img.height) {
clearInterval(timer);
timer = null;
width = img.width;
height = img.height;
}
}, 1);
vue获取不到页面图片实际宽高的更多相关文章
- AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)
文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...
- vue : 检测用户上传的图片的宽高
需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- RT/Metro商店应用如何如何获取图片的宽高
RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- 根据图片url地址获取图片的宽高
/** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...
- elementUI upload 对图片的宽高做校验
很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...
- iOS学习-压缩图片(改变图片的宽高)
压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...
- java读取远程url图片,得到宽高
链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...
随机推荐
- Vue11 vue的data中属性的值(基础数据类型和对象)
1 代码 <body> <div id="root"> <h1>{{name}}</h1> <h1>{{obj}}< ...
- Element-Ui表单移除校验clearValidate和resetFields
添加和修改公用一个弹窗,点击添加弹窗后,如果没移除表单校验的话,再点击修改弹窗时校验就会被记住,所以需要移除校验,但在清空表单校验时会报如下错误: 那么,你只需要加上这段话即可 this.$nextT ...
- 编写FailServlet和SuccessServlet类
@WebServlet("/successServlet") public class SuccessServlet extends HttpServlet { protected ...
- 在react项目如何捕获错误
在React项目是如何捕获错误的? 一.是什么 错误在我们日常编写代码是非常常见的 举个例子,在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏,导致整个应 ...
- 安装redhat6.10 出现的问题
安装redhat6.10 操作系统不定时重启情况说明 曾出现报错如下: 在UEFI模式下安装RHEL6.10,安装完毕后系统第一次重启无法进入操作系统,同时屏幕上出现错误提示: Invalid m ...
- CF863E - Turn Off The TV
题意:对于若干个闭区间 \([l_i,r_i]\),它们构成了一个集合 \(\bigcup_{i\le n}{[l_i,r_i]}\),求一个 \(k\),使得 \(\bigcup_{i\le n}{ ...
- 【译】.NET 7 中的性能改进(八)
原文 | Stephen Toub 翻译 | 郑子铭 Mono 到目前为止,我一直提到 "JIT"."GC "和 "运行时",但实际上在.N ...
- Bouncy Castle密码算法库
Bouncy Castle密码算法库 一.开发背景 Bouncy Castle 是一种用于 Java 平台的开放源码的轻量级密码术包.它支持大量的密码术算法,并提供 JCE 1.2.1 的实现.因为 ...
- Centos 6.5 iptables 端口白名单设置
iptables -I INPUT -p tcp --dport 8888 -j DROPiptables -I INPUT -s 10.9.145.101 -p tcp --dport 8888 - ...
- 使用oledb读写excel出现“操作必须使用一个可更新的查询”的解决办法
使用oledb读写excel出现"操作必须使用一个可更新的查询"的解决办法 转自:http://www.cnblogs.com/Richinger/archive/2008/09/ ...