提交 0c66d7ad 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 fa7d243b
# Image # Image
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
图片组件,用来渲染展示图片。 图片组件,用来渲染展示图片。
## 权限列表 ## 权限说明
ohos.permission.INTERNET(使用网络图片) 使用网络图片时,需要在config.json(FA模型)或者module.json5(Stage模型)对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
```
"abilities": [
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
## 子组件 ## 子组件
...@@ -23,14 +34,14 @@ Image(src: string | PixelMap | Resource) ...@@ -23,14 +34,14 @@ Image(src: string | PixelMap | Resource)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)| 是 | - | 图片的数据源,支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持该Image组件被跨包/跨模块调用,建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。 | | src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源,支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持该Image组件被跨包/跨模块调用,建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图。支持本地图片和网络路径。 | | alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图。支持本地图片和网络路径。 |
| objectFit | ImageFit | Cover | 设置图片的缩放类型。 | | objectFit | ImageFit | Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 | | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
...@@ -41,7 +52,7 @@ Image(src: string | PixelMap | Resource) ...@@ -41,7 +52,7 @@ Image(src: string | PixelMap | Resource)
- ImageFit枚举说明 - ImageFit枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | --------- | -------------------------------- |
| Cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 | | Cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 |
| Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 | | Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 |
| Fill | 不保持宽高比进行放大缩小,使得图片填充满显示边界。 | | Fill | 不保持宽高比进行放大缩小,使得图片填充满显示边界。 |
...@@ -50,7 +61,7 @@ Image(src: string | PixelMap | Resource) ...@@ -50,7 +61,7 @@ Image(src: string | PixelMap | Resource)
- ImageInterpolation枚举说明 - ImageInterpolation枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | ------ | ------------------------ |
| None | 不使用插值图片数据。 | | None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据,可能会影响图片渲染的速度。 | | High | 高度使用插值图片数据,可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 | | Medium | 中度使用插值图片数据。 |
...@@ -58,7 +69,7 @@ Image(src: string | PixelMap | Resource) ...@@ -58,7 +69,7 @@ Image(src: string | PixelMap | Resource)
- ImageRenderMode枚举说明 - ImageRenderMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | -------- | --------------------- |
| Original | 按照原图进行渲染,包括颜色。 | | Original | 按照原图进行渲染,包括颜色。 |
| Template | 将图像渲染为模板图像,忽略图片的颜色信息。 | | Template | 将图像渲染为模板图像,忽略图片的颜色信息。 |
...@@ -66,7 +77,7 @@ Image(src: string | PixelMap | Resource) ...@@ -66,7 +77,7 @@ Image(src: string | PixelMap | Resource)
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图源尺寸。 | | onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图源尺寸。 |
| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。 | | onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。 |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 | | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
......
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
@Entry @Entry
@Component @Component
struct CompA { struct CompA {
size : number = 100; size1 : number = 100;
@Builder SquareText(label: string) { @Builder SquareText(label: string) {
Text(label) Text(label)
.width(1 * this.size) .width(1 * this.size1)
.height(1 * this.size) .height(1 * this.size1)
} }
@Builder RowOfSquareTexts(label1: string, label2: string) { @Builder RowOfSquareTexts(label1: string, label2: string) {
...@@ -21,8 +21,8 @@ struct CompA { ...@@ -21,8 +21,8 @@ struct CompA {
this.SquareText(label1) this.SquareText(label1)
this.SquareText(label2) this.SquareText(label2)
} }
.width(2 * this.size) .width(2 * this.size1)
.height(1 * this.size) .height(1 * this.size1)
} }
build() { build() {
...@@ -32,12 +32,12 @@ struct CompA { ...@@ -32,12 +32,12 @@ struct CompA {
this.SquareText("B") this.SquareText("B")
// or as long as tsc is used // or as long as tsc is used
} }
.width(2 * this.size) .width(2 * this.size1)
.height(1 * this.size) .height(1 * this.size1)
this.RowOfSquareTexts("C", "D") this.RowOfSquareTexts("C", "D")
} }
.width(2 * this.size) .width(2 * this.size1)
.height(2 * this.size) .height(2 * this.size1)
} }
} }
``` ```
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册