1# MediaCachedImage (System API)
2
3The **MediaCachedImage** component, with APIs that inherit from [Image](ts-basic-components-image.md) and the added capability of loading texture resources (for system applications only), is typically used to display images in applications.
4
5> **NOTE**
6>
7> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> The APIs provided by this module are system APIs.
10
11## APIs
12
13MediaCachedImage(src: PixelMap | ResourceStr | DrawableDescriptor | ASTCResource)
14
15Obtains an image from the specified source for subsequent rendering and display.
16
17**System API**: This is a system API.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name| Type                                                    | Mandatory| Description                                                    |
24| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
25| src    | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) \| [ResourceStr](ts-types.md#resourcestr) \| [DrawableDescriptor](../js-apis-arkui-drawableDescriptor.md#drawabledescriptor) \| [ASTCResource](#astcresource12) | 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](../../../ui/arkts-graphics-display.md#loading-image-resources). The ASTCResource type is available for system applications only.|
26
27## ASTCResource<sup>12+</sup>
28
29Describes texture stitching.
30
31**System API**: This is a system API.
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35| Type   | Description                                     |
36| ------- | ----------------------------------------- |
37| sources | URI array, indicating the textures to be stitched.|
38| column  | Column size, indicating the number of textures to be stitched in each row.   |
39
40## Example
41
42 This example loads images of basic types.
43
44```ts
45@Entry
46@Component
47struct MediaCachedImageExample {
48  build() {
49    Column() {
50      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
51        Row() {
52          // Load a PNG image.
53          MediaCachedImage($r('app.media.ic_camera_master_ai_leaf'))
54            .width(110).height(110).margin(15)
55            .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
56          // Load a GIF image.
57          MediaCachedImage($r('app.media.loading'))
58            .width(110).height(110).margin(15)
59            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
60        }
61        Row() {
62          // Load an SVG image.
63          MediaCachedImage($r('app.media.ic_camera_master_ai_clouded'))
64            .width(110).height(110).margin(15)
65            .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
66          // Load a JPG image.
67          MediaCachedImage($r('app.media.ic_public_favor_filled'))
68            .width(110).height(110).margin(15)
69            .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
70        }
71      }
72    }.height(320).width(360).padding({ right: 10, top: 10 })
73  }
74}
75```
76
77![en-us_image_0000001592882500](figures/en-us_image_0000001592882500.gif)
78