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

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

开发环境 版本号 项目创建方式
Windows WIN11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 15

手机厂商：小米

手机机型：note13

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<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？


更多关于在uni-appx中的image组件设置border-radius圆角无效，需要嵌套在view里设置view圆角才有效，请问这是bug吗，那如果图片需要设置圆角时，都得在外面加个view？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

更新： 感谢反馈，已知问题，在安卓+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>

更多关于在uni-appx中的image组件设置border-radius圆角无效，需要嵌套在view里设置view圆角才有效，请问这是bug吗，那如果图片需要设置圆角时，都得在外面加个view？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你把图片改为gif

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

回复 爱豆豆: 是的

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

回复 DCloud_UNI_OttoJi: 好的

我本地试了一下是没有问题的，你再检查一下呢。


你这图片。。。好多茄子

这不是bug，而是uni-app的设计机制。在uni-app中，image组件本身不支持直接设置border-radius样式来实现圆角效果，这是由底层渲染引擎决定的。

解决方案确实需要在外层嵌套一个view容器，然后在view上设置border-radius和overflow:hidden来实现图片圆角效果。这是目前推荐的标准做法，示例代码如下：

<view class="rounded-image">
  <image src="your-image-url" mode="aspectFill"></image>
</view>

<style>
.rounded-image {
  border-radius: 75rpx;
  overflow: hidden;
  width: 150rpx;
  height: 150rpx;
}
.rounded-image image {
  width: 100%;
  height: 100%;
}
</style>
回到顶部