在某些情况下需要页面图片的宽高,使用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. Xlight安装与使用

    Xlight安装与使用 一.Xlight安装 下载Xlight安装包,点击安装,默认就可以,下一步 点击左上角增加虚拟服务器,IP地址为本机服务器IP地址 右键点击新添加的虚拟服务器,点击虚拟服务器操 ...

  3. 【TS】函数和函数类型

    在使用函数的时候,通常会给函数传值,或者给函数一个返回值调用,这个时候就会涉及到函数类型. 函数类型分为两个方面: 1.函数参数 2.函数返回值 语法: function 函数名( 参数 : 参数类型 ...

  4. Symbol详解

    Symbol Symbol是es6引入的一个新的原始数据类型,是一个独一无二的值. 目前为止,js的数据类型有以下几种: 数据类型 说明 undefined undefined null null b ...

  5. Xmake v2.7.7 发布,支持 Haiku 平台,改进 API 检测和 C++ Modules 支持

    Xmake 是一个基于 Lua 的轻量级跨平台构建工具. 它非常的轻量,没有任何依赖,因为它内置了 Lua 运行时. 它使用 xmake.lua 维护项目构建,相比 makefile/CMakeLis ...

  6. linux配置两个不同网段的ip and linux批量添加连续IP

    转载csdn: centos 下批量添加连续IP_cdefg198的专栏-CSDN博客_centos批量添加ip 转载csdn: linux配置两个不同网段的ip_子曰小玖的博客-CSDN博客_lin ...

  7. openfoam UPstream类探索(二)

    前言 接上次的博文,本篇补全以下几个函数的介绍: Pstream::nProcs() Pstream::parRun() UPstream::exit() 简述几个常用的函数如下: Pstream:: ...

  8. 从零开始使用阿里云OSS服务(白嫖)

    阿里云对象存储服务OSS使用记录 1 新人免费开通OSS服务 访问 阿里云官网,登录账号(个人新用户账号),首页搜索 对象存储OSS,点击下方的直达. 点击立即开通,此时会在一个新网页中完成开通 完成 ...

  9. 都在用 AI 生成美少女,而我却。。。

    最近 AI 画画特别的火,你能从网上看到非常多好看的图片,于是我就开始了我的安装之旅,我看到的图是这样的. 这样的. 还有这样的. 然后我就开始了我的 AI 安装生成计划. 安装环境 首先我们需要安装 ...

  10. Postgresql invalid command \N数据恢复处理

    做一个单表恢复工作,数据在1000多W,说是报了错误导不进去,环境与流程见下:恢复步骤: 1.导出语句 pg_dump -h xxxxx -p 5432 -U postgres -b -Fp db_t ...