uniapp/vue3获取加载图片原始的宽度高度

这是图片标签代码

使用@load监听事件

//vue3的image标签，动态的src

<image :src="imgLoad.imageSrc" mode="widthFix" @load="onImageLoad()"></image>

定义常量

const imgLoad = ref({
  imageSrc: '/static/images/scenery1.jpg',
  imageWidth: 0,
  imageHeight: 0
});

方法

function onImageLoad(e){
  //isEmpty方法自己封装了的非空判断

  if (!isEmpty(e)){
    //当前预览图片下标
    let imgIndex = e.detail.current;
  }
  uni.getImageInfo({
    src: imagesArr.value[imgIndex],
    success: (res) => {
      imgLoad.value.imageWidth = res.width;
      imgLoad.value.imageHeight = res.height;
      console.log('图片宽度:', imgLoad.value.imageWidth);
      console.log('图片高度:', imgLoad.value.imageHeight);
    },
    fail: (err) => {
      console.error('获取图片信息失败:', err);
    }
  });
}

最后效果输出，如下图：