uni-app nvue页面 list页面 cell下图片在安卓手机上显示模糊

uni-app nvue页面 list页面 cell下图片在安卓手机上显示模糊

测试过的手机

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

操作步骤：

  • 使用nvue

预期结果：

  • 加上圆角后，图片能正常显示，不要模糊

实际结果：

  • 安卓图片模糊

bug描述：

使用nvue页面，list下cell,加载图片，使用style="border-radius: 15rpx;"后，安卓手机上图片模糊，不使用圆角，图片正常。 示例工程：已重新上传到附件，下载运行即可，特备是截图中，有"慢熬"两个字的图片，模糊很明显

Image 1 Image 2


更多关于uni-app nvue页面 list页面 cell下图片在安卓手机上显示模糊的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

测试Redmi K30 没有发现问题，请提供失真的屏幕截图

更多关于uni-app nvue页面 list页面 cell下图片在安卓手机上显示模糊的实战教程也可以访问 https://www.itying.com/category-93-b0.html


重新上传了文件，麻烦请重新下载运行看下反馈的问题，谢谢

在图片上加上border-radius属性后，安卓手机上图片失真，不加，显示正常

第一次运行 没有模糊的话 可以滑动下页面 就会出现模糊情况

我这边有相同问题实际测试， 安卓下，结构必须是 waterfall 结构 cell 中 的 image 如果设置 border-radius 就明显很模糊

我们属于同类问题，image在安卓手机上层级还高，image不设置border-radius，在外层包裹的view设置border-radius，图片不会圆角，在IOS上会圆角

请官方能仔细看下这个问题，这确实是个bug

在nvue中，为<image>组件设置border-radius后出现安卓端图片模糊，这是已知的渲染问题。主要原因是nvue使用原生渲染，圆角处理方式与Webview不同。

解决方案：

  1. 使用overflow: hidden（推荐） 将图片包裹在<view>中，为外层设置圆角和overflow: hidden：

    <view style="border-radius: 15rpx; overflow: hidden;">
  <image src="xxx" style="width: 100%; height: 100%;"></image>
</view>

  2. 使用border-radius配合background-image 如果图片是纯展示，可改用<view>的background-image：

    <view style="border-radius: 15rpx; background-image: url('xxx'); background-size: cover; width: 100px; height: 100px;"></view>
回到顶部