uni-app vue3模式下image标签mode=heightFix显示异常

uni-app vue3模式下image标签mode=heightFix显示异常

示例代码：

<view class="content">  
    <image class="logo" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg" mode="heightFix"></image>  
    <view class="text-area">  
        <text class="title">{{title}}</text>  
    </view>  
</view>

操作步骤：

创建一个uni-app默认模板，修改pages/index/index.vue文件如上图代码（图片链接为image文档测试图片，仅修改image标签处内容）

预期结果：

vue3需要正常以高固定，宽自适应展示，保证图片不能变形

实际结果：

vue3下图片变形，外观来看是长和宽反了

bug描述：

VUE2下image标签 mode="heightFix"显示正常，仅将manifest.json中vue版本改为3后，图片变显示异常。补充：是以 运行-> 运行到手机或模拟器 -> 在真机上展示结果

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 10
HBuilderX类型 正式
HBuilderX版本 3.2.16
手机系统 Android
手机系统版本 Android 11
手机厂商 小米
手机机型 小米10至尊
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app vue3模式下image标签mode=heightFix显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题复现，后续优化，已加分，感谢您的反馈！

更多关于uni-app vue3模式下image标签mode=heightFix显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX alpha 3.3.12+ 已修复

在 uni-app Vue3 模式下，image 组件的 mode="heightFix" 确实存在已知的兼容性问题。这是由于 Vue3 的响应式系统与 uni-app 底层渲染机制在特定模式下配合异常导致的。

问题核心：heightFix 模式的计算逻辑在 Vue3 环境中未能正确获取图片的原始宽高比，导致容器高度固定后宽度计算错误，表现为图片被拉伸变形。

临时解决方案：

  1. 使用 mode="widthFix" 替代：如果布局允许，改用宽度自适应、高度固定的模式，并调整外层容器样式。

  2. 手动计算宽高比：通过 @load 事件获取图片原始尺寸，动态计算并设置样式。

    <image 
  :src="imageUrl" 
  mode="aspectFit" 
  :style="{ height: fixedHeight + 'px', width: autoWidth }"
  @load="onImageLoad"
/>

    const onImageLoad = (event) => {
  const { width, height } = event.detail;
  autoWidth.value = (width / height) * fixedHeight + 'px';
};

  3. 使用 CSS 属性 object-fit: contain：为 image 组件添加类名并设置 CSS：

    .fixed-height-img {
  height: 300px; /* 固定高度 */
  width: auto;
  object-fit: contain;
}
回到顶部