在某些情况下需要页面图片的宽高,使用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获取不到页面图片实际宽高的更多相关文章

  1. AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)

    文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...

  2. vue : 检测用户上传的图片的宽高

    需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...

  3. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  4. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

  5. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  6. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  7. 根据图片url地址获取图片的宽高

    /** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...

  8. elementUI upload 对图片的宽高做校验

    很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...

  9. iOS学习-压缩图片(改变图片的宽高)

    压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...

  10. java读取远程url图片,得到宽高

    链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...

随机推荐

  1. JAVA虚拟机05-内存溢出示例(jdk1.8)

    1.JAVA虚拟机堆内存溢出OutOfMemoryError 1.1设置参数 -Xms20m -Xmx20m -XX:+HeapDumpOnOutOfMemoryError 最小堆的大小20m 最大堆 ...

  2. 又花了半个小时将 ChatGPT 接入了钉钉机器人

    前面的文章给大家介绍了如何在个人微信中使用 ChatGPT,但是大家都知道这种操作是有风险的,所以都让大家使用小号,今天再给大家介绍一下如何在钉钉中使用机器人来调戏 AI. 流程 注册钉钉开发者平台账 ...

  3. 使用Kubernetes中的Nginx来改善第三方服务的可靠性和延迟

    使用Kubernetes中的Nginx来改善第三方服务的可靠性和延迟 译自:How we improved third-party availability and latency with Ngin ...

  4. [ARC107D] Number of Multisets

    \(\text{Solution}\) 学习到了一些 \(dp\) 的 \(trick\) 设 \(f_{i,j}\) 表示用了 \(i\) 的元素,当前和为 \(j\) 的方案数 \(dp\) 有两 ...

  5. Luogu P1505.[国家集训队]旅游

    题解 真真正正是个码农题,不过很套路,熟练就打得很快,不过要用点维护边的信息在 \(\text{LCA}\) 出要注意,不能处理此点的信息 \(Code\) #include<cstdio> ...

  6. [POI2011]MET-Meteors 解题报告

    语言系统紊乱了 QAQ 这道题感觉不是很难鸭 qwq. 先只考虑一个国家,怎么做?很显然,就直接二分一下就行了.判定答案可以维护一个差分数组,然后最后对它做一个前缀和,再求一下这个国家的流行数量就好了 ...

  7. [EULAR文摘] 滑膜HIF-1a与类风湿关节炎的关节破坏

    滑膜HIF-1a与类风湿关节炎的关节破坏 Wei XN, et al. EULAR 2015. Present ID: OP0070. 背景:低氧诱导因子(HIF)-1α是缺氧条件下细胞反应的一个关键 ...

  8. PE头结构解析(代码实现)

    PE头结构解析(代码实现) 图表实现在:https://www.cnblogs.com/juicyhumberger/articles/17064764.html #include "std ...

  9. pat乙级 1017 A除以B 模拟除法

    #include <stdio.h> #define MAX_A 1000 int A[MAX_A]; int B; /* 除数 */ int num; /* A 被除数有多少位 */ v ...

  10. XAF在页面中添加按钮

    参考链接:XAF在DashboardView右下方添加SimpleAction - 幽梦紫曦的专栏 - TNBLOG