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 ...
随机推荐
- Hystrix容错监控机制
六:Hystrix容错监控机制 什么是微服务的容错机制 提前预设解决方案.,系统自主调节,遇到问题即时处理 什么是Hystrix Netfix 设计原则: 服务隔离机制 服务降级 熔断机制 提供实时的 ...
- 数值的扩展方法以及新增数据类型BigInt
二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o或(0O)表示 0b111110111 === 503 // true; 0o767 === 503; / ...
- C#后缀表达式解析计算字符串公式
当我们拿到一个字符串比如:20+31*(100+1)的时候用口算就能算出结果为3151,因为这是中缀表达式对于人类的思维很简单,但是对于计算机就比较复杂了.相对的后缀表达式适合计算机进行计算. 我们就 ...
- FreeFileSync:开源的文件同步工具 | Linux 中国
转载知乎: https://zhuanlan.zhihu.com/p/194778373
- 浅拷贝导致的bug
目录 深拷贝与浅拷贝区别 hutool BeanUtil.copyProperties 浅拷贝问题重现 实现深拷贝的一些工具 深拷贝与浅拷贝区别 在 Java 中,除了基本数据类型(元类型)之外,还存 ...
- .Net Core IIS部署以及问题总结
IIS部署 1.程序内和.NET之前一样发布就行 2.文件考到服务器,正常部署 重点:①程序池选择无托管代码.②模块中看是否有安装这两个模块,没有的话去微软官网下载 下载地址:两个都要装 1.http ...
- UnoCSS 简化 CSS 的书写
CSS 样式太多,重复写 在学习 UnoCSS 之前,我提出几个问题: 你是否有过写完了 HTML 之后,跳转到 style 写 CSS 这样来回跳转的痛苦? 你是否有过不知道如何给节点取类名的痛苦( ...
- JAVA排序的方法
//冒泡排序法: package fuxi;public class Bubble { public static void main(String[] args) { int a ...
- 子路由path路径带 ‘/‘与不带
子路由不带 / : $router.push('/layout/home') 浏览器地址栏显示: http:xxxxxxxxxx/layout/home 带 / : $router.push('/us ...
- loj2839
除了 L 神 txdy 我还能说啥呢.(L 神把这题搬模拟赛了...) 即把每个 x 换成 ( 或 ),问是否能通过不多于一次区间反转(( 与 ) 交换)后合法. 考虑怎样的括号串是合法的. 假设左括 ...