小米澎湃系统下 uniapp 小图标自动变成白色了 颜色变化 图标放大就能正常

小米澎湃系统下 uniapp 小图标自动变成白色了 颜色变化 图标放大就能正常

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

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

win11

HBuilderX类型：

正式

HBuilderX版本号：

4.36

手机系统：

Android

手机系统版本号：

Android 15

手机厂商：

小米

手机机型：

k70

页面类型：

vue

vue版本：

vue2

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<u-image :src="pic_machine_type(item)" width="80rpx" height="80rpx" :loadingIcon="'../../static/images/Pro.png'" :errorIcon="'../../static/images/Pro.png'" :bgColor="listBgColor"></u-image>

操作步骤：

<u-image :src="pic_machine_type(item)" width="80rpx" height="80rpx" :loadingIcon="'../../static/images/Pro.png'" :errorIcon="'../../static/images/Pro.png'" :bgColor="listBgColor"></u-image>

预期结果：

小米澎湃系统下 小图标自动变成白色了 颜色变化 图标放大就能解决

实际结果：

小米澎湃系统下 小图标自动变成白色了 颜色变化 图标放大就能解决

Image 1 Image 2

bug描述：

小米澎湃系统下 小图标自动变成白色了 颜色变化 图标放大就能解决


1 回复

这个问题可能是小米澎湃系统的图标渲染机制导致的。建议尝试以下解决方案：

  1. 检查图片格式，确保使用的是PNG-24或SVG格式，避免使用带透明通道的8位PNG

  2. 尝试为u-image组件添加mode="aspectFit"属性，强制保持原图比例：

<u-image 
  :src="pic_machine_type(item)" 
  width="80rpx" 
  height="80rpx" 
  mode="aspectFit"
  :loadingIcon="'../../static/images/Pro.png'" 
  :errorIcon="'../../static/images/Pro.png'" 
  :bgColor="listBgColor">
</u-image>
  1. 如果问题仍然存在，可以尝试将图标放大到100rpx以上，然后通过CSS缩放：
<u-image 
  :src="pic_machine_type(item)" 
  width="100rpx" 
  height="100rpx" 
  style="transform: scale(0.8)"
  :loadingIcon="'../../static/images/Pro.png'" 
  :errorIcon="'../../static/images/Pro.png'" 
  :bgColor="listBgColor">
</u-image>
回到顶部