uni-app image组件设置border-radius加aspectFit mode在nvue页面显示异常

uni-app image组件设置border-radius加aspectFit mode在nvue页面显示异常

示例代码：

<view class="uni-title uni-common-mt">  
    图片圆角 aspectFit mode<text>\n网络图片</text>  
</view>  
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
    <image style="width: 200px; height: 200px; border:1px solid red; border-radius: 20px;"  
        mode="aspectFit" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" />
</view>  

<view class="uni-title uni-common-mt">  
    图片 aspectFit mode  <text>\n网络图片</text>  
</view>  
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
    <image style="width: 200px; height: 200px; border:1px solid red;"  
        mode="aspectFit" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" />
</view>

操作步骤：

  1. 使用 Hello uni-app 模板项目
  2. 创建一个nvue页面
  3. 粘贴示例代码
  4. Android设备使用标准基座运行

预期结果：

  • image 内容显示正常

实际结果：

  • image 内容被其他颜色填充

bug描述：

  • image 组件设置 border-radius + aspectFit mode 在nvue页面显示异常
信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10.0.19045
HBuilderX类型 正式
HBuilderX版本号 4.66
手机系统 Android
手机系统版本号 Android 13
手机厂商 vivo, Google
手机机型 IQ00 11s, Pixel 3a
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app image组件设置border-radius加aspectFit mode在nvue页面显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app image组件设置border-radius加aspectFit mode在nvue页面显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue页面中image组件的渲染问题。在nvue环境下，当同时设置border-radius和aspectFit mode时，图片内容区域可能会被错误填充。这是由于weex底层渲染引擎的限制导致的。

解决方案：

  1. 对于nvue页面，建议使用border-radius配合mode="scaleToFill"来替代aspectFit
  2. 或者使用view包裹image，给外层view设置border-radius，并设置overflow: hidden

临时解决方法代码示例：

<view style="width:200px;height:200px;border-radius:20px;overflow:hidden;">
  <image style="width:100%;height:100%;" 
    mode="aspectFit" 
    src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"/>
</view>
回到顶部