在某些情况下需要页面图片的宽高,使用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. 重学SpringBoot. step1 全注解的SpringBoot

    参考:<深入浅出SpringBoot 2.x> 全注解的SpringBoot 用户可以通过注解将所需要的对象,存放到IOC容器中,然后SpringBoot可以根据这些需要使用的情况,自动注 ...

  2. 体验AI乐趣:基于AI Gallery的二分类猫狗图片分类小数据集自动学习

    摘要:直接使用AI Gallery里面现有的数据集进行自动学习训练,很简单和方便,节约时间,不用自己去训练了,AI Gallery 里面有很多类似的有趣数据集,也非常好玩,大家一起试试吧. 本文分享自 ...

  3. 华为云CodeArts Artifact,5大特性守护制品质量与安全

    摘要:2023年2月23日,华为云CodeArts Artifact制品仓库服务正式上线,目标进一步赋能企业伙伴与开发者,实现软件作业中可信制品生产与应用活动快速落地,提高软件交付效率与质量. 本文分 ...

  4. Vulhub 漏洞学习之:ECShop

    Vulhub 漏洞学习之:ECShop 目录 Vulhub 漏洞学习之:ECShop 1 ECShop 2.x/3.x SQL注入/远程命令执行漏洞 1.1 环境安装 1.2 漏洞产生原因 1.3 漏 ...

  5. 嵌入式Linux—输入子系统

    输入系统 常见的输入设备有键盘.鼠标.遥控杆.书写板.触摸屏等等,用户通过这些输入设备与Linux系统进行数据交换. 内核中怎样表示一个输入设备 // include/linux/input.h st ...

  6. VUE子组件使用父组件值并赋值

    子组件使用父组件值,要改变使用用赋值方法,定义新变量: 定义新变量:copyTrendObj 此时copyTrendObj 可以被赋值 props: { trendObj: { type: Objec ...

  7. CF884F - Anti-Palindromize

    我们发现这个题的数据范围."字符和位置匹配"再加上一条奇怪的限制,长得就很网络流,那么就考虑如何用网络流做. 考虑重新解释一下这个题面,其实就是:给定一个字符集和 \(n\) 个位 ...

  8. 推荐系统[八]算法实践总结V2:排序学习框架(特征提取标签获取方式)以及京东推荐算法精排技术实战

    0.前言 「排序学习(Learning to Rank,LTR)」,也称「机器排序学习(Machine-learned Ranking,MLR)」 ,就是使用机器学习的技术解决排序问题.自从机器学习的 ...

  9. api规范PHP,RESTful API规范(详细版)

    rest 是一种软件架构风格,如果你们的接口是 rest 接口,那么就可被认为你们的的接口是restful的,英文名词和形容词的区别. rest 接口是围绕"资源"展开的,利用HT ...

  10. 【10】java之final关键字

    1.使用final 定义的变量就变成了常量,常量必须在定义的时候就设置好内容且不能修改. public static final 声明的就是全局常量. public static final Stri ...