uni-app image 组件 mode 设置为 widthFix 时，无法获取实际的节点高度

uni-app image 组件 mode 设置为 widthFix 时，无法获取实际的节点高度

操作步骤：

  1. 使用图片组件，mode 设置为 widthFix；
  2. 在任意位置获取该节点信息，高度返回一直是 240，与实际高度不符合。

预期结果：

  1. 使用图片组件，mode 设置为 widthFix；
  2. 获取该节点信息,返回的高度信息因该与实际高度一致。

实际结果：

获取该节点信息,返回的高度一直为 240，与实际高度不符合。

bug描述：

  1. 使用图片组件，mode 设置为 widthFix；
  2. 在任意位置获取该节点信息，高度返回一直是 240，与实际高度不符合。
<template>  
  <image  
    :src="require('./demo.jpg')"  
    mode="widthFix"  
    class="image"  
    lazy-load  
  ></image>  
</template>  

<script>  
export default {  
  mounted() {  
    uni  
      .createSelectorQuery()  
      .select(".image")  
      .boundingClientRect((data) => {  
        console.log(data);  
      })  
      .exec();  
  },  
};  
</script>

信息项 内容
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
浏览器平台 Chrome
浏览器版本 88.0.4324.182
项目创建方式 CLI
CLI版本号 4.5.7

更多关于uni-app image 组件 mode 设置为 widthFix 时，无法获取实际的节点高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

时机，注意时机

更多关于uni-app image 组件 mode 设置为 widthFix 时，无法获取实际的节点高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


目前我们这边测试，mode 设置为其他的都可以获取到正确的节点信息。唯独 widthFix 不管什么样的图片，放到哪里执行，一直都是返回 height:240；能否说明一下您说的时机，是指哪里呢？

我反馈的这个问题， 在2020 年4月份，已经有开发者反馈了，但是并没有得到反馈。 附上那位开发者反馈的帖子：https://ask.dcloud.net.cn/question/92677

回复 SuperPony: 实际指的是加载时机，你在图像加载以前获取高度，获取的是错误的高度

试试在 image 组件的 load 事件后

感谢回复

这个load事件取到的高度也不对呀，是原图的宽高，想获取这个最后的高度214px怎么获取呢，我现在有个情况是要给swiper动态赋值高度，所有图片都是widthFix,怎么确认所有图片都加载完了呢？

回复 jjhjiyu: 试了试，可以了

回复 深海智行: 什么可以了，怎么确认widthFix图片全都加载完了,而且load事件取到的是原图宽高，如果要取图片真实高度，还得再取一次节点信息查一次

回复 jjhjiyu: 对的

我遇到的问题是 使用动画, 在动画缩放的时候 图片就加载出来了,但是动画完成之后 图片的尺寸是失真的,因为动画开始的第一贞 图片就已经设置好了高度, 但是 动画完成后并没有更新图片高度,

这是一个已知的异步渲染问题。当 mode 设置为 widthFix 时，图片需要先加载完成才能计算出正确的高度，而 mounted 钩子中获取节点信息时图片可能尚未加载完成。

解决方案是在图片加载完成后获取节点信息：

<template>
  <image
    :src="require('./demo.jpg')"
    mode="widthFix"
    class="image"
    lazy-load
    @load="onImageLoad"
  ></image>
</template>

<script>
export default {
  methods: {
    onImageLoad() {
      uni
        .createSelectorQuery()
        .select(".image")
        .boundingClientRect((data) => {
          console.log(data); // 此时会返回正确的高度
        })
        .exec();
    }
  }
};
</script>
回到顶部