# Image >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. The **** component is used to render and display images. ## Required Permissions ohos.permission.INTERNET \(using Internet images\) ## Child Components None ## APIs Image\(value: \{uri: string | PixelMap\}\) - Parameters

Name

Type

Mandatory

Default Value

Description

uri

string

Yes

-

Image URI. Both local and Internal URIs are supported.
## Attributes

Name

Type

Default Value

Description

alt

string

-

Placeholder image displayed during loading. Both local and Internal URIs are supported.

objectFit

ImageFit

Cover

Image scale type.

objectRepeat

ImageRepeat

NoRepeat

Whether the image is repeated.

NOTE:
  • This attribute is not applicable to SVG images.

interpolation

ImageInterpolation

None

Interpolation effect of the image. This attribute is valid only when the image is zoomed in.

NOTE:
  • This attribute is not applicable to SVG images.
  • This attribute is not applicable to a PixelMap object.

renderMode

ImageRenderMode

Original

Rendering mode of the image.

NOTE:
  • This attribute is not applicable to SVG images.

sourceSize

{

width: number,

height: number

}

-

Decoding size of the image. The original image is decoded into an image of the specified size. If the value is of the number type, the unit px is used.

NOTE:

This attribute is not applicable to a PixelMap object.

syncLoad8+

boolean

false

Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.
- ImageFit enums

Name

Description

Cover

The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.

Contain

The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.

Fill

The video content is resized to fill the display area while retaining its aspect ratio.

None

The original size is retained. Generally, this enum is used together with the objectRepeat attribute.

ScaleDown

The image content is displayed with its aspect ratio retained. The size is smaller than or equal to the original size.
- ImageInterpolation enums

Name

Description

None

Interpolation image data is not used.

High

The interpolation image data is used at the high level. The use of the interpolation image data may affect the image rendering speed.

Medium

The interpolation image data is used at the medium level.

Low

The interpolation image data is used at the low level.
- ImageRenderMode enums

Name

Description

Original

The image is rendered based on the original image, including the color.

Template

The image is rendered as a template image, and its color is ignored.
## Events

Name

Description

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)

Triggered when an image is successfully loaded. The loaded image is returned.

onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)

An exception occurs during image loading.

onFinish(callback: () => void)

If the source file to be loaded is an SVG image, this callback is invoked when the SVG animation playback is complete. If the animation is an infinite loop, this callback is not triggered.
## Example ``` // Image1 @Entry @Component struct ImageExample1 { private on: string = 'www.example.com/' @State src: string = this.on build() { Column() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { Text('default').fontSize(16).fontColor(0xcccccc).height(30) Row({ space: 5 }) { Image($r('app.media.ic_png')) .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.ic_gif')) .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.ic_svg')) .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } Row({ space: 5 }) { Image($r('app.media.img_example')) .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image(this.src) .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('network', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) }.margin({ top: 25, bottom: 10 }) } Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { Text('objectFit').fontSize(16).fontColor(0xcccccc).height(30) Row({ space: 5 }) { Image($r('app.media.img_example')) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectFit(ImageFit.None).width(110).height(110) .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.img_example')) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectFit(ImageFit.Fill).width(110).height(110) .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.img_example')) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectFit(ImageFit.Cover).width(110).height(110) .overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } Row({ space: 5 }) { Image($r('app.media.img_example_w250')) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectFit(ImageFit.Contain).width(110).height(110) .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.img_example_w250')) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectFit(ImageFit.ScaleDown).width(110).height(110) .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) }.margin({ top: 25 }) } }.height(320).width(360).padding({ right: 10, top: 10 }) } } ``` ![](figures/en-us_image_0000001239925031.gif) ``` // Image2 @Entry @Component struct ImageExample2 { @State width: number = 100 @State height: number = 100 build() { Column({ space: 10 }) { Text('renderMode').fontSize(12).fontColor(0xcccccc).width('96%').height(30) Row({ space: 50 }) { Image($r('app.media.img_example')) .renderMode(ImageRenderMode.Original).width(100).height(100) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.img_example')) .renderMode(ImageRenderMode.Template).width(100).height(100) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } Text('alt').fontSize(12).fontColor(0xcccccc).width('96%').height(30) Image('') .alt($r('app.media.Image_none')) .width(100).height(100).border({ width: 1 }).borderStyle(BorderStyle.Dashed) Text('sourceSize').fontSize(12).fontColor(0xcccccc).width('96%') Row({ space: 50 }) { Image($r('app.media.img_example')) .sourceSize({ width: 150, height: 150 }) .objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('w:150 h:150', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.img_example')) .sourceSize({ width: 200, height: 200 }) .objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1) .border({ width: 1 }).borderStyle(BorderStyle.Dashed) .overlay('w:200 h:200', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } Text('objectRepeat').fontSize(12).fontColor(0xcccccc).width('96%').height(30) Row({ space: 5 }) { Image($r('app.media.ic_health_heart')) .width(120).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectRepeat(ImageRepeat.XY).objectFit(ImageFit.ScaleDown) .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.ic_health_heart')) .width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectRepeat(ImageRepeat.Y).objectFit(ImageFit.ScaleDown) .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r('app.media.ic_health_heart')) .width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) .objectRepeat(ImageRepeat.X).objectFit(ImageFit.ScaleDown) .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } }.height(150).width('100%').padding({ right: 10 }) } } ``` ![](figures/en-us_image_0000001194605518.png) ``` // Image3 @Entry @Component struct ImageExample3 { @State width: number = 0 @State height: number = 0 private on: Resource = $r('app.media.wifi_on') private off: Resource = $r('app.media.wifi_off') private on2off: Resource = $r('app.media.wifi_on2off') private off2on: Resource = $r('app.media.wifi_off2on') @State src: Resource = this.on build() { Column() { Row({ space: 20 }) { Column() { Image($r('app.media.img_example1')) .alt($r('app.media.ic_public_picture')) .sourceSize({ width: 900, height: 900 }) .objectFit(ImageFit.Cover) .height(180).width(180) .onComplete((msg: { width: number,height: number }) => { this.width = msg.width this.height = msg.height }) .onError(() => { console.log('load image fail') }) .overlay('\nwidth: ' + String(this.width) + ' height: ' + String(this.height), { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } Image(this.src) .width(120).height(120) .onClick(() => { if (this.src == this.on || this.src == this.off2on) { this.src = this.on2off } else { this.src = this.off2on } }) .onFinish(() => { if (this.src == this.off2on) { this.src = this.on } else { this.src = this.off } }) } }.width('100%') } } ``` ![](figures/en-us_image_0000001194942468.gif)