MediaCachedImage (系统接口)

MediaCachedImage继承自Image，新增了纹理资源的加载能力（仅限系统应用），常用于应用中显示图片。

说明：

该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

本模块为系统接口。

接口

MediaCachedImage

MediaCachedImage(src: PixelMap | ResourceStr | DrawableDescriptor | ASTCResource)

通过图片数据源获取图片，用于后续渲染展示。

系统接口： 此接口为系统接口。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
src	PixelMap | ResourceStr | DrawableDescriptor | ASTCResource	是	图片的数据源，支持媒体库资源，PixelMap、ResourceStr、DrawableDescriptor的引用方式可参考Image的加载图片资源，ASTCResource为纹理资源，只支持系统应用。

属性

支持通用属性。

事件

支持通用事件。

ASTCResource¹²⁺

纹理类型，用于设置纹理拼接的属性值。

系统接口： 此接口为系统接口。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数名	类型	必填	说明
sources	Array<string>	是	uri资源数组，表示进行拼接的纹理资源信息。
column	number	是	列大小，表示每行要拼接的纹理资源个数。 取值为正整数，非正整数会导致图片无法加载。

示例

加载基本类型图片。

@Entry
@Component
struct MediaCachedImageExample {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row() {
          // 加载png格式图片。
          MediaCachedImage($r('app.media.ic_camera_master_ai_leaf'))
            .width(110).height(110).margin(15)
            .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加载gif格式图片。
          MediaCachedImage($r('app.media.loading'))
            .width(110).height(110).margin(15)
            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
        Row() {
          // 加载svg格式图片。
          MediaCachedImage($r('app.media.ic_camera_master_ai_clouded'))
            .width(110).height(110).margin(15)
            .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加载jpg格式图片。
          MediaCachedImage($r('app.media.ic_public_favor_filled'))
            .width(110).height(110).margin(15)
            .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
      }
    }.height(320).width(360).padding({ right: 10, top: 10 })
  }
}