图片

Image 用来加载并显示图片的基础组件，它支持从内存、本地和网络加载图片，当从网络加载图片的时候，需要申请网络访问权限。

限制与约束

当加载网络图片时需要申请 ohos.permission.INTERNET 权限。

定义介绍

interface ImageInterface {
  (src: string | PixelMap | Resource): ImageAttribute;
}

示例

@Entry @Component struct Index {
  build() {
    Row({space: 10}) {
      Image($r("app.media.test")) // 设置图片
        .width(180)               // 设置组件宽为180vp
        .height(80)               // 设置组件高为80vp
    }
    .width('100%')
    .padding(10)
  }
}

属性

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 种匹配模式：

• ImageFit.Cover：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外。(默认)

• Contain: 保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内。

• Fill: 不保持图片宽高比进行放缩显示，使得图片完全覆盖显示边界。

• None: 不进行放缩显示。通常配合 objectRepeat 属性一起使用。

• ScaleDown：保持图片宽高比显示，使图片缩小或者保持不变的显示出来。

renderMode

设置图片的渲染模式.

• Original(默认值) 按照原图进行渲染

• Template: 将图像渲染为模板图像,忽略图像的颜色信息.都是灰色

@Entry @Component struct Index {
  build() {
    Row({space: 10}) {
      Image($r("app.media.test"))
        .width(90)
        .height(90)
        .renderMode(ImageRenderMode.Original) // 原图渲染

      Image($r("app.media.test"))
        .width(90)
        .height(90)
        .renderMode(ImageRenderMode.Template) // 模板渲染
    }
    .padding(10)
    .width('100%')
  }
}

事件

onComplete

图片成功加载时,触发的回调函数.返回图片原始尺寸信息

onError

图片加载出现异常的时候 触发的回调

onFinish

当加载的源文件为带动效的 svg 图片时，当 svg 动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

Image 加载方式

从本地加载

• 拷贝 test.png 图片到工程的 resources/main/base/media 目录下

• 加载图片 直接使用系统提供的资源访问符$r()

import image from '@ohos.multimedia.image';
import file from '@ohos.fileio';

@Entry @Component struct ComponentTest {

  @State pixelMap: PixelMap = undefined;

  build() {
    Column() {
      if (undefined == this.pixelMap) {
        Image($r("app.media.test"))
        	.width(180)
				  .height(80)
      } else {
        Image(this.pixelMap)
        	.width(180)
				  .height(80)
      }
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height(('100%'))
    .padding(10)
  }

  private aboutToAppear() {
    var fd = file.openSync("/data/imgs/test.png");
    image.createImageSource(fd).createPixelMap({
      sampleSize: 1,
      rotate: 0,
      editable: false
    }).then((pixelMap) => {
      this.pixelMap = pixelMap;
    })
  }
}

从网络加载

Image("https://img.sample.com/imgs/test.png").width(180).height(80);

从内存加载

Image(this.pixelMap) // pixelMap为内存图片
  .width(180)
  .height(80);

Image 缓存设置

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

setImageCacheCount

设置内存中缓存解码后图片的数量上限，单位为 number

setImageRawDataCacheSize

设置内存中缓存解码前图片数据的大小上限，单位为字节。

setImageFileCacheSize

设置图片文件缓存的大小上限，单位为字节。

import { AbilityConstant, UIAbility, Want } from "@kit.AbilityKit";
import { App } from "@kit.ArkUI";

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    App.setImageRawDataCacheSize(100 * 1024 * 1024); // 设置解码前图片数据内存缓存上限为100MB
  }
}