1# MediaCachedImage（系统接口）
2
3MediaCachedImage继承自[Image](ts-basic-components-image.md)，新增了纹理资源的加载能力（仅限系统应用），常用于应用中显示图片。
4
5> **说明：**
6>
7> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> 本模块为系统接口
10
11## 接口
12
13MediaCachedImage(src: PixelMap | ResourceStr | DrawableDescriptor | ASTCResource)
14
15通过图片数据源获取图片，用于后续渲染展示。
16
17**系统接口：** 此接口为系统接口
18
19**系统能力：** SystemCapability.ArkUI.ArkUI.Full
20
21**参数：**
22
23| 参数名 | 参数类型                                                     | 必填 | 参数描述                                                     |
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) | 是   | 图片的数据源，支持媒体库资源，PixelMap、ResourceStr、DrawableDescriptor的引用方式可参考Image的[加载图片资源](../../../ui/arkts-graphics-display.md#加载图片资源)，ASTCResource为纹理资源，只支持系统应用 |
26
27## ASTCResource<sup>12+</sup>
28
29纹理类型，用于设置纹理拼接的属性值。
30
31**系统接口：** 此接口为系统接口
32
33**系统能力：** SystemCapability.ArkUI.ArkUI.Full
34
35| 类型    | 说明                                      |
36| ------- | ----------------------------------------- |
37| sources | uri资源数组，表示进行拼接的纹理资源信息。 |
38| column  | 列大小，表示每行要拼接的纹理资源个数。    |
39
40## 示例
41
42 加载基本类型图片
43
44```ts
45@Entry
46@Component
47struct MediaCachedImageExample {
48  build() {
49    Column() {
50      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
51        Row() {
52          // 加载png格式图片
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          // 加载gif格式图片
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          // 加载svg格式图片
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          // 加载jpg格式图片
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![zh-cn_image_0000001592882500](figures/zh-cn_image_0000001592882500.gif)