uni-app Nvue下 图片使用圆角标签不圆的问题

uni-app Nvue下 图片使用圆角标签不圆的问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.1.2

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米10

页面类型：nvue

打包方式：云端

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .logo {  
        margin: 275rpx;  
        height: 200rpx;  
        width: 200rpx;  

        border-radius: 100rpx;  
        border-width: 10rpx;  
        border-color: #000000;  
        border-style: solid;  

    }  
</style>

操作步骤： 直接运行代码或者下载附件代码

预期结果： 圆角正常。

实际结果： 图片不圆。

bug描述： 在Nvue下，给image标签 添加圆角样式以及描边样式，会出现圆角不圆的问题。 描边越粗，越不圆。 vue下无此问题。


更多关于uni-app Nvue下 图片使用圆角标签不圆的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

顶一下，好像确实存在这个问题

更多关于uni-app Nvue下 图片使用圆角标签不圆的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


等回复

问题已确认

在nvue中，图片圆角问题是由于weex原生渲染的限制导致的。要解决这个问题，可以使用以下两种方法：

  1. 使用overflow: hidden配合圆角：
.logo {
    border-radius: 100rpx;
    overflow: hidden;
}
  1. 使用border-radius和clip-path组合：
.logo {
    border-radius: 100rpx;
    clip-path: inset(0 round 100rpx);
}
回到顶部