<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>
2***@qq.com
- 发布：2025-05-29 11:21
- 更新：2025-06-24 15:53
- 阅读：106
产品分类： 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
示例代码：
操作步骤：
- 使用 Hello uni-app 模板项目
- 创建一个nvue页面
- 粘贴示例代码
- Android设备使用标准基座运行
- 使用 Hello uni-app 模板项目
- 创建一个nvue页面
- 粘贴示例代码
- Android设备使用标准基座运行
预期结果：
image 内容显示正常
image 内容显示正常
实际结果：
image 内容被其他颜色填充
image 内容被其他颜色填充
bug描述：
image 组件设置 border-radius + aspectFit mode 在nvue页面显示异常
