HarmonyOS基本工具封装——BaseImage解决鸿蒙加载图片过大时闪退问题

前言

• BasicLibrary是一个基于API 11封装的基本库
• 未来的计划是将其打造成一个通用的UI组件+基本工具组件，目前只做了部分基本工具组件，大家如果组件有什么需求，可以尽管提哦
• BasicLibrary项目地址
• BasicLibrary的openHarmony三方库中心仓

简介

鸿蒙基本库封装，提升鸿蒙开发效率

安装

ohpm install @peakmain/library

介绍

• 解决华为图片过大闪退问题
• 用于显示图片或占位图的基础组件，支持图片加载、尺寸控制、圆角处理等功能。

导入依赖

import { BaseImage} from '@peakmain/library'

组件属性

属性名	类型	默认值	说明
url	ResourceStr	""	图片资源路径（必填）
imageSize	`SizeOptions	null`	null
fillColor	`ResourceColor	ResourceStr`	undefined
imageFit	`ImageFit	null`	null
imageRadius	`Length	BorderRadiuses	LocalizedBorderRadiuses
placeBackgroundColor	ResourceColor	ColorMetrics.numeric(0xFFE9E9E9).color	占位图背景颜色（当 url 为空时显示）

组件方法

方法名	参数	返回值	说明
build	无	void	组件构建方法： - 若 url 为空，显示带占位背景和圆角的 Stack - 若 url 有效，显示图片并应用配置

解决原理

• 核心代码：autoResize
• 官方文档地址：developer.huawei.com/consumer/cn...
• 设置图片解码过程中是否对图源自动缩放。降采样解码时图片的部分信息丢失，因此可能会导致图片质量的下降（如：出现锯齿），这时可以选择把autoResize设为false，按原图尺寸解码，提升显示效果，但会增加内存占用。
• 虽官方说图片部分信息丢失，但我们这边测下，基本没啥区别(肉眼上)