uni-app 安卓nvue list cell下图片设置圆角后模糊问题 在轮播下面五个功能按钮和特色招商里设置圆角图片明显模糊 去掉圆角后图片正常

uni-app 安卓nvue list cell下图片设置圆角后模糊问题 在轮播下面五个功能按钮和特色招商里设置圆角图片明显模糊 去掉圆角后图片正常

测试过的手机：

Redmi Note7 MIUI 12.5.3系统、phoneXR、华为HRY-AL00Ta

操作步骤：

  • 安卓手机：nvue,list，cell下图片设置圆角，图片失真

预期结果：

  • 能正常显示

实际结果：

  • 图片失真

bug描述：

安卓：nvue,list，cell下图片设置圆角后，图片模糊，圆角去掉后，图片正常，可以在轮播下面五个功能按钮和特色招商里，设置一下，很明显图片模糊，若第一次没有模糊，可以滑动下页面再看下，代码已上传，请下载运行查看，谢谢

附件

表格

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Mac
PC系统版本 10.14.6
HBuilderX 正式
HBuilderX版本 3.2.9
手机系统 全部
手机厂商 华为
手机机型 Redmi Note7 MIUI 12.5.3系统、phoneXR、华为HRY-AL00Ta
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 安卓nvue list cell下图片设置圆角后模糊问题 在轮播下面五个功能按钮和特色招商里设置圆角图片明显模糊 去掉圆角后图片正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

请不要发布重复问题，之前的问题已经收到了，有结果了会回复你

更多关于uni-app 安卓nvue list cell下图片设置圆角后模糊问题 在轮播下面五个功能按钮和特色招商里设置圆角图片明显模糊 去掉圆角后图片正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 的 list 或 cell 中，对图片设置圆角后出现模糊，是安卓端渲染机制导致的常见问题。这是因为 nvue 在安卓上使用原生渲染，图片和圆角分别由不同图层处理，合成时可能引起图像质量下降。

原因分析：

  1. 图层合成问题：安卓原生渲染中，图片与圆角遮罩分层处理，合成时可能产生抗锯齿或缩放失真。
  2. 硬件加速限制：某些机型在滚动或动画过程中，为优化性能会降低图像质量。

解决方案：

  • 使用 border-radius 替代方案：
    将图片作为 background-image 设置圆角，而非直接对 image 组件应用 border-radius。示例：
    <view class="rounded-img" :style="{ backgroundImage: 'url(' + imgUrl + ')' }"></view>

    .rounded-img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-size: cover;
}
回到顶部