小程序获取图片高度宽度

### 如何在微信小程序中获取图片的高度和宽度

#### 使用 `wx.getImageInfo` 方法
为了提前获取远程图片的尺寸信息，在不实际显示该图片的情况下，可以利用 `wx.getImageInfo` 接口来实现这一需求。此方法允许开发者传入目标图像的 URL 地址，并返回有关该图的信息对象，其中包含了宽度 (`width`) 和高度 (`height`) 属性。

wx.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: function(res){
    console.log(`Image Width:${res.width}, Image Height:${res.height}`);
    const ratio = res.width / res.height;
    console.log(`Aspect Ratio is ${ratio}`);
  }
});

上述代码展示了如何调用 `getImageInfo` 函数并处理成功回调中的响应数据[^1]。

#### 利用 `<image>` 组件事件监听器
当页面上存在 `<image>` 标签时，可以通过绑定其 `bindload` 或者 `onLoad` 事件处理器来捕获加载完成后的自然尺寸属性。这适用于那些已经在界面上呈现出来的本地或网络资源。

<view>
  <image 
    src="{{imageUrl}}" 
    mode="aspectFit"
    @load="handleImageLoaded">
  </image>
</view>

对应的 JavaScript 部分如下：

Page({
  handleImageLoaded(e) {
    let detail = e.detail;
    console.log(detail.width, detail.height);
  },
})

这段脚本定义了一个名为 `handleImageLoaded` 的函数用于接收由视图层触发的 load 事件携带的数据，进而打印出所载入图片的实际宽高值[^4]。

#### 设置 Swiper 中动态调整子项大小
对于包含多张幻灯片形式展示的内容区域（如轮播图），可能希望基于当前选中项的具体情况自动改变容器布局参数。此时可以在 swiper-item 内部放置 image 并为其指定特定样式规则以及相应的交互逻辑以确保每次切换都能及时更新关联样式。

.swiper-container .swiper-slide img{
  width: 100%;
}

配合 JS 处理逻辑:

data() {
  return {
    images: [
      '/path/to/img1.png',
      '/path/to/img2.png'
    ],
    slideIndex: 0,
    slidesHeight: []
  };
},
methods:{
  onSwiperChange(event){
    const index = event.currentTarget.dataset.index;
    this.slideIndex = index;

    // 假设已经预先知道了各张图片的真实尺寸...
    if (!this.slidesHeight[index]){
        wx.getImageInfo({
          src:this.images[index],
          success:(info)=>{
            this.$set(this.slidesHeight,index,(750/info.width)*info.height+'rpx');
          }
        });
     }
  }
}

这里假设有一个 swiper 容器内的多个滑动项目，每当用户翻页时都会重新评估新位置处元素的最佳视觉表现方式[^3]。