b***@163.com

发布：2026-03-27 15:28
更新：2026-03-28 10:09
阅读：34

【报Bug】NVUE image flex和mode同时存在，border-radius样式无效，vue页面不存在此问题

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 5.05

手机系统： Android

手机系统版本号： Android 16

手机厂商：华为

手机机型： mate5 pro

页面类型： nvue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

    <text>有圆角</text>  
    <view style="padding: 10px 16px 50px 16px;">  
        <image style="width:650rpx; border-radius: 10px;" mode="widthFix" src="https://picsum.photos/seed/house_bef846abe1e3468bbf3c_img1/1200/900"   ></image>  
    </view>  

</view>

</template>

操作步骤：

必现

预期结果：

nvue页面，图片有圆角

实际结果：

nvue页面，图片没有圆角

bug描述：

【报Bug】NVUE image flex和mode同时存在，border-radius样式无效，vue页面不存在此问题

nvue_demo.zip

2026-03-27 15:28 负责人:无分享

2 个回复

Ask小助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

感谢反馈，针对这个 NVUE 页面中 image 组件同时使用 flex 和 mode 属性导致 border-radius 失效的问题，我进行如下评审：

反馈质量评价

该反馈基本完整，代码示例可直接运行，能够清晰复现问题。但存在以下可优化点：

复现步骤描述过于简略，仅标注"必现"，建议补充具体操作步骤（如：编译到 Android App 后查看图片显示效果）
HBuilderX 版本号标注为 5.05，目前最新正式版为 5.04（2026-03-18 更新），请确认具体版本号是否为 Alpha 版或存在笔误
建议补充截图对比（有圆角 vs 无圆角效果），便于快速确认问题现象

Bug 成立性分析

根据知识库中 nvue-css 注意事项的说明，NVUE 的 CSS 是 webview CSS 语法的子集，虽支持 border-radius 简写样式，但 NVUE 的各组件在安卓端默认是透明的，且 image 组件为原生渲染组件。

结合历史版本记录，在 Android 3.4.6 版本中曾修复过"nvue image 组件 mode 属性设置为 widthFix/HeightFix 时可能导致图片无法显示的Bug"，说明 image 组件在处理 mode 属性时存在特殊的原生渲染逻辑。

当同时设置 flex:1（参与 flex 布局计算）和 mode="widthFix"（改变图片尺寸计算方式）时，border-radius 的裁剪区域可能因原生渲染层的计算冲突而失效。这与 Vue 页面（基于 webview 渲染）的表现差异符合预期，因为 NVUE 使用原生渲染引擎，并非浏览器内核。

初步判断与建议

此问题在技术上成立，属于 NVUE 原生渲染引擎对 image 组件样式裁剪的计算限制。

建议尝试以下临时方案验证：

移除 flex:1，改用固定宽度（如 650rpx）测试圆角是否生效，确认问题与 flex 布局的关联性
在 image 外层包裹 view 组件，将 border-radius 设置在父级 view 上并设置 overflow:hidden
尝试使用 nvueStyleCompiler 配置（HBuilderX 3.1.0+ 支持），看是否能改善样式编译结果

如问题在最新 Alpha 版（5.03）或正式版（5.04）中仍然存在，建议提供详细截图和真机运行日志，以便进一步定位原生渲染层的问题。

内容为 AI 生成，仅供参考

b***@163.com (作者)

谁能帮忙处理一下

2026-03-28 10:09 分享

要回复问题请先登录或注册

【报Bug】NVUE image flex和mode同时存在，border-radius样式无效，vue页面不存在此问题

操作步骤：

必现

预期结果：

nvue页面，图片有圆角

实际结果：

nvue页面，图片没有圆角

bug描述：

2 个回复

公告

相关问题

【报Bug】NVUE image flex和mode同时存在，border-radius样式无效，vue页面不存在此问题

操作步骤： 必现

预期结果： nvue页面，图片有圆角

实际结果： nvue页面，图片没有圆角

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

必现

预期结果：

nvue页面，图片有圆角

实际结果：

nvue页面，图片没有圆角