diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif index 3dfbd730c80b91d5dcb0583fad6af2c6895febfd..3d20649fb216bdf03020adbd8d6dae36025fe26a 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250492613.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index a87005436acc5a397ffcbc5725975153d1ce4c81..431803bd6768fbb10a78c3db02387f4fa6374a31 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -97,61 +97,27 @@ Image(src: PixelMap | ResourceStr | DrawableDescriptor) @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')) + Image($r('app.media.example_png')) .width(110).height(110).border({ width: 1 }) .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image($r('app.media.ic_gif')) + Image($r('app.media.example_gif')) .width(110).height(110).border({ width: 1 }) .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image($r('app.media.ic_svg')) - .width(110).height(110).border({ width: 1 }) - .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } + Row({ space: 5 }) { - Image($r('app.media.img_example')) + Image($r('app.media.example_svg')) .width(110).height(110).border({ width: 1 }) - .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) - Image(this.src) + .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.example_jpg')) .width(110).height(110).border({ width: 1 }) - .overlay('network', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + .overlay('jpg', { 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 }) - .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 }) - .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 }) - .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 }) - .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 }) - .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 }) } }