Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
a0a8a22e
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a0a8a22e
编写于
6月 21, 2022
作者:
C
chenxuankai1
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
modify description for image src
Signed-off-by:
N
chenxuankai1
<
chenxuankai1@huawei.com
>
上级
034f39e7
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
19 addition
and
19 deletion
+19
-19
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
...ation-dev/reference/arkui-ts/ts-basic-components-image.md
+19
-19
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @
a0a8a22e
...
...
@@ -24,7 +24,7 @@ Image(src: string | PixelMap | Resource)
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| src | string
\|
[PixelMap](../apis/js-apis-image.md#pixelmap7)\|
[
Resource
](
../../ui/ts-types.md#resource类型
)
| 是 | - | 图片的数据源,支持本地图片和网络图片。
<br/>
\-
支持的图片格式包括png、jpg、bmp、svg和gif。
<br/>
\-
支持
`Base64`
字符串。格式
`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`
, 其中
`[base64 data]`
为
`Base64`
字符串数据。
<br/>
\-
支持
`dataability://`
路径前缀的字符串,用于访问通过data
ability提供的图片路径。 |
| src | string
\|
[PixelMap](../apis/js-apis-image.md#pixelmap7)\|
[
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
ability提供的图片路径。 |
## 属性
...
...
@@ -40,36 +40,36 @@ Image(src: string | PixelMap | Resource)
| syncLoad
<sup>
8+
</sup>
| boolean | false | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。 |
-
ImageFit枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| Cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 |
| Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 |
| Fill | 不保持宽高比进行放大缩小,使得图片填充满显示边界。 |
| None | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 |
| ScaleDown | 保持宽高比显示,图片缩小或者保持不变。 |
| Cover | 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 |
| Contain | 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。 |
| Fill | 不保持宽高比进行放大缩小,使得图片填充满显示边界。 |
| None | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 |
| ScaleDown | 保持宽高比显示,图片缩小或者保持不变。 |
-
ImageInterpolation枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据,可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 |
| Low | 低度使用插值图片数据。 |
| None | 不使用插值图片数据。 |
| High | 高度使用插值图片数据,可能会影响图片渲染的速度。 |
| Medium | 中度使用插值图片数据。 |
| Low | 低度使用插值图片数据。 |
-
ImageRenderMode枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| Original | 按照原图进行渲染,包括颜色。 |
| Template | 将图像渲染为模板图像,忽略图片的颜色信息。 |
| Original | 按照原图进行渲染,包括颜色。 |
| Template | 将图像渲染为模板图像,忽略图片的颜色信息。 |
## 事件
| 名称 | 功能描述 |
| 名称 | 功能描述 |
| -------- | -------- |
| onComplete(callback:
(event?:
{
width:
number,
height:
number,
componentWidth:
number,
<br>
componentHeight:
number,
loadingStatus:
number
})
=
>
void) | 图片成功加载时触发该回调,返回成功加载的图源尺寸。 |
| onError(callback:
(event?:
{
componentWidth:
number,
componentHeight:
number
})
=
>
void) | 图片加载出现异常时触发该回调。 |
| onFinish(callback:
()
=
>
void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
| onComplete(callback:
(event?:
{
width:
number,
height:
number,
componentWidth:
number,
<br>
componentHeight:
number,
loadingStatus:
number
})
=
>
void) | 图片成功加载时触发该回调,返回成功加载的图源尺寸。 |
| onError(callback:
(event?:
{
componentWidth:
number,
componentHeight:
number
})
=
>
void) | 图片加载出现异常时触发该回调。 |
| onFinish(callback:
()
=
>
void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
## 示例
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录