MediaCachedImage (System API)

The MediaCachedImage component, with APIs that inherit from Image and the added capability of loading texture resources (for system applications only), is typically used to display images in applications.

NOTE

This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.

The APIs provided by this module are system APIs.

APIs

MediaCachedImage

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

Obtains an image from the specified source for subsequent rendering and display.

System API: This is a system API.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
src	PixelMap | ResourceStr | DrawableDescriptor | ASTCResource	Yes	Data source of the image. Media library resources are supported. For details about how to reference an image of the PixelMap, ResourceStr, or DrawableDescriptor type, see Loading Image Resources. The ASTCResource type is available for system applications only.

Attributes

The universal attributes are supported.

Event

The universal events are supported.

ASTCResource¹²⁺

Describes texture stitching.

System API: This is a system API.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
sources	Array<string>	Yes	URI array, indicating the textures to be stitched.
column	number	Yes	Column size, indicating the number of textures to be stitched in each row.

Example

This example loads images of basic types.

@Entry
@Component
struct MediaCachedImageExample {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row() {
          // Load a PNG image.
          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 } })
          // Load a GIF image.
          MediaCachedImage($r('app.media.loading'))
            .width(110).height(110).margin(15)
            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
        Row() {
          // Load an SVG image.
          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 } })
          // Load a JPG image.
          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 })
  }
}