【报Bug】在uniappx中的image组件设置border-radius圆角无效，需要嵌套在view里设置view圆角才有效，请问这是bug吗，那如果图片需要设置圆角时，都得在外面加个view？

分类：uni-app

bug已确认 uni-app x

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： WIN11

HBuilderX类型：正式

HBuilderX版本号： 4.57

手机系统： Android

手机系统版本号： Android 15

手机厂商：小米

手机机型： note13

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<image class="w75r h75r" style="border-radius: 75rpx;" src="https://5b0988e595225.cdn.sohucs.com/images/20181215/350fdfdb33b84e54a0e8463d07eb8e94.gif" mode="aspectFill"></image>

操作步骤：

如上述代码

预期结果：

有效

实际结果：

无效果

bug描述：

【报Bug】在uniappx中的image组件设置border-radius圆角无效，需要嵌套在view里设置view圆角才有效，请问这是bug吗，那如果图片需要设置圆角时，都得在外面加个view？

2025-03-26 21:27 负责人:DCloud_Android_THB 分享

3 个回复

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

更新：
感谢反馈，已知问题，在安卓+gif 上有此问题。https://issues.dcloud.net.cn/pages/issues/detail?id=336，为了兼容多种图片格式可以在外层加圆角。

我测试 uniapp x 运行到安卓模拟器是正常的。你升级下 HBuilderX 到最新版再试试

<template>  
  <view>  
   <image  style="width:100px;height:100px;border-radius: 75rpx;" src="/static/logo.png" mode="aspectFill"></image>  
  </view>  
</template>

爱豆豆

你把图片改为gif

2025-03-27 16:38
爱豆豆

gif链接: https://env-00jxh127ub71.normal.cloudstatic.cn/350fdfdb33b84e54a0e8463d07eb8e94.gif

2025-03-27 16:43
DCloud_UNI_OttoJi

回复爱豆豆: 是的

2025-03-27 16:47
DCloud_UNI_OttoJi

回复爱豆豆: 这个是已知问题，我补充一下

2025-03-27 16:57
爱豆豆

回复 DCloud_UNI_OttoJi: 好的

2025-03-27 17:06