Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
8952b70c
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看板
提交
8952b70c
编写于
8月 23, 2022
作者:
L
liyujie
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update image componet network pictures loading
Signed-off-by:
N
liyujie
<
liyujie43@huawei.com
>
上级
5e4d73d0
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
66 addition
and
1 deletion
+66
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
...ation-dev/reference/arkui-ts/ts-basic-components-image.md
+66
-1
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @
8952b70c
...
...
@@ -70,7 +70,6 @@ Image(src: string | PixelMap | Resource)
| Original | 按照原图进行渲染,包括颜色。 |
| Template | 将图片渲染为模板图片,忽略图片的颜色信息。 |
## 事件
除支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
...
...
@@ -153,6 +152,72 @@ struct ImageExample1 {
![
zh-cn_image_0000001250492613
](
figures/zh-cn_image_0000001250492613.gif
)
### 网络图片
加载网络图片时,默认网络超时是5分钟,建议使用alt配置加载时的占位图。如果需要更灵活的网络配置,可以使用SDK中提供的
[
HTTP
](
../../connectivity/http-request.md
)
工具包发送网络请求,接着将返回的数据解码为Image组件中的
`PixelMap`
,图片开发可参考
[
图片处理
](
../../media/image.md
)
。代码如下。
```
tsx
// @ts-nocheck
import
http
from
'
@ohos.net.http
'
;
import
ResponseCode
from
'
@ohos.net.http
'
;
import
image
from
'
@ohos.multimedia.image
'
@
Entry
@
Component
struct
Index
{
// 先创建一个PixelMap状态变量用于接收网络图片
@
State
image
:
PixelMap
=
undefined
build
()
{
Column
({
space
:
10
})
{
Button
(
"
获取网络图片
"
)
.
onClick
(()
=>
{
this
.
httpRequest
();
})
Image
(
this
.
image
).
height
(
100
).
width
(
100
)
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
padding
(
10
)
}
// 网络图片请求方法
private
httpRequest
()
{
let
httpRequest
=
http
.
createHttp
();
httpRequest
.
request
(
"
https://www.example.com/xxx.png
"
,
// 请填写一个具体的网络图片地址
(
error
,
data
)
=>
{
if
(
error
)
{
console
.
log
(
"
error code:
"
+
error
.
code
+
"
, msg:
"
+
error
.
message
)
}
else
{
let
code
=
data
.
responseCode
if
(
ResponseCode
.
ResponseCode
.
OK
==
code
)
{
let
imageSource
=
image
.
createImageSource
(
data
.
result
)
let
options
=
{
alphaType
:
0
,
// 透明度
editable
:
false
,
// 是否可编辑
pixelFormat
:
3
,
// 像素格式
scaleMode
:
1
,
// 缩略值
size
:
{
height
:
100
,
width
:
100
}}
// 创建图片大小
imageSource
.
createPixelMap
(
options
).
then
((
pixelMap
)
=>
{
this
.
image
=
pixelMap
})
}
else
{
console
.
log
(
"
response code:
"
+
code
);
}
}
}
)
}
}
```
**说明**
:网络图片加载的请求方式、超时、额外请求参数等配置可以参考HTTP工具包中关于
[
`request()`
](
../../reference/apis/js-apis-http.md#HttpreRuest
)
请求方法的细节。
### 设置属性
```
ts
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录