OpenHarmony组件之Image-CFANZ编程社区

Image定义介绍

interface ImageInterface {
  (src: string

src：设置要加载的图片资源，支持从本地、网络和内存中加载图片，简单样例如下

Image属性介绍

declare class ImageAttribute extends CommonMethod<ImageAttribute> {
  alt(value: string | Resource): ImageAttribute;
  matchTextDirection(value: boolean): ImageAttribute;
  fitOriginalSize(value: boolean): ImageAttribute;
  fillColor(value: ResourceColor): ImageAttribute;
  objectFit(value: ImageFit): ImageAttribute;
  objectRepeat(value: ImageRepeat): ImageAttribute;
  autoResize(value: boolean): ImageAttribute;
  renderMode(value: ImageRenderMode): ImageAttribute;
  interpolation(value: ImageInterpolation): ImageAttribute;
  sourceSize(value: { width: number; height: number }): ImageAttribute;
  syncLoad(value: boolean): ImageAttribute;
  onComplete(
    callback: (event?: {
      width: number;
      height: number;
      componentWidth: number;
      componentHeight: number;
      loadingStatus: number;
    }) => void,
  ): ImageAttribute;
  onError(callback: (event?: { componentWidth: number; componentHeight: number }) => void): ImageAttribute;
  onFinish(event: () => void): ImageAttribute;
}

alt：设置占位图，图片显示之前先显示占位图，比如在加载网络图片或者图片加载失败时的场景。
objectFit：设置图片的放缩类型，当 Image 组件大小和图片大小不同时指定图片的放缩类型， ImageFit 提供了以下5种匹配模式：

Cover（默认值）：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外。
Contain：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内。
Fill：不保持图片宽高比显示，是图片完全充满显示边界。
None：保持图片原有尺寸显示，通常配合objectRepeat 属性一起使用。
ScaleDown：保持图片宽高比显示，使图片缩小或者保持不变的显示出来。

Image缓存设置

Image 组件没有提供图片缓存相关的 api ，ArkUI开发框架在 @system.app 模块内提供了图片的全局缓存策略，全局缓存策略使用了 LRU 算法：

setImageCacheCount：设置内存中缓存解码后图片的数量上限，单位为 number。
setImageRawDataCacheSize：设置内存中缓存解码前图片数据的大小上限，单位为字节。
setImageFileCacheSize：设置图片文件缓存的大小上限，单位为字节。
在APP启动的时候，设置全局缓存策略，用法如下：

import app from '@system.app';

export default {
  onCreate() {
    console.info('Application onCreate')
    app.setImageRawDataCacheSize(100 * 1024 * 1024) // 设置解码前图片数据内存缓存上限为100MB
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}