• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# image开发指导
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @liyujie43-->
5<!--Designer: @weixin_52725220-->
6<!--Tester: @xiong0104-->
7<!--Adviser: @HelloCrease-->
8
9image是图片组件，用来渲染展示图片。具体用法请参考[image](../reference/apis-arkui/arkui-js/js-components-basic-image.md)。
10
11
12## 创建image组件
13
14在pages/index目录下的hml文件中创建一个image组件。
15```html
16<!-- index.hml -->
17<div class="container">
18  <image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
19</div>
20```
21
22```css
23/* xxx.css */
24.container {
25  width: 100%;
26  height: 100%;
27  flex-direction: column;
28  justify-content: center;
29  align-items: center;
30  background-color: #F1F3F5;
31}
32```
33
34![zh-cn_image_0000001211227617](figures/zh-cn_image_0000001211227617.png)
35
36
37## 设置image样式
38
39通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。
40
41
42```html
43<!-- index.hml -->
44<div class="container">
45  <image src="common/images/bg-tv.jpg"> </image>
46</div>
47```
48
49
50```css
51/* xxx.css */
52.container {
53  width: 100%;
54  height: 100%;
55  flex-direction: column;
56  align-items: center;
57  justify-content: center;
58  background-color:#F1F3F5;
59}
60image{
61  width: 80%;
62  height: 500px;
63  border: 5px solid saddlebrown;
64  border-radius: 20px;
65  object-fit: contain;
66  match-text-direction:true;
67}
68```
69
70
71![zh-cn_image_0000001163532072](figures/zh-cn_image_0000001163532072.png)
72
73
74## 加载图片
75
76图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。
77
78```html
79<!-- index.hml -->
80<div class="container" >
81  <div>
82    <image src="common/images/bg-tv.jpg" oncomplete="imageComplete(1)" onerror="imageError(1)"> </image>
83  </div>
84  <div>
85    <image src="common/images/bg-tv1.jpg" oncomplete="imageComplete(2)" onerror="imageError(2)"> </image>
86  </div>
87</div>
88```
89
90```css
91/* xxx.css */
92.container{
93  width: 100%;
94  height: 100%;
95  flex-direction: column;
96  justify-content: center;
97  align-self: center;
98  background-color: #F1F3F5;
99}
100.container div{
101  margin-left: 10%;
102  width: 80%;
103  height: 300px;
104  margin-bottom: 40px;
105}
106```
107
108```js
109// index.js
110import promptAction from '@ohos.promptAction';
111export default {
112  imageComplete(i,e){
113    promptAction.showToast({
114      message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height,
115      duration: 3000,
116    })
117  },
118  imageError(i,e){
119    setTimeout(()=>{
120      promptAction.showToast({
121        message: "Failed to load image "+i+".",
122        duration: 3000,
123      })
124    },3000)
125  }
126}
127```
128
129![zh-cn_image_images](figures/zh-cn_image_images.gif)
130
131
132
133## 场景示例
134
135在本场景中，开发者长按图片后将慢慢隐藏图片，当完全隐藏后再重新显示原始图片。定时器setInterval每隔一段时间改变图片透明度,实现慢慢隐藏的效果，当透明度为0时清除定时器，设置透明度为1。
136```html
137<!-- index.hml -->
138<div class="page-container">
139  <div class="content">
140    <div class="image-container">
141      <image class="testimage" src="{{testuri}}" style="opacity:{{imageopacity}};" onlongpress="changeopacity"> </image>
142    </div>
143    <div class="text-container">
144      <text style="font-size: 37px;font-weight:bold;color:orange;text-align: center;width: 100%;">Touch and hold the image</text>
145    </div>
146  </div>
147</div>
148```
149
150```css
151/* xxx.css */
152.page-container {
153  width: 100%;
154  height: 100%;
155  flex-direction:column;
156  align-self: center;
157  justify-content: center;
158  background-color:#F1F3F5;
159  background-color: #F1F3F5;
160}
161.content{
162  flex-direction:column;
163}
164.image-container {
165  width: 100%;
166  height: 300px;
167  align-items: center;
168  justify-content: center;
169}
170.text-container {
171  margin-top:50px;
172  width: 100%;
173  height: 60px;
174  flex-direction: row;
175  justify-content: space-between;
176}
177.testimage {
178  width: 100%;  height: 400px;
179  object-fit: scale-down;
180  border-radius: 20px;
181}
182```
183
184```js
185// index.js
186import promptAction from '@ohos.promptAction';
187export default {
188  data: {
189    testuri: 'common/images/bg-tv.jpg',
190    imageopacity:1,
191    timer: null
192  },
193  changeopacity: function () {
194    promptAction.showToast({
195      message: 'Touch and hold the image.'
196    })
197    var opval = this.imageopacity * 20
198    clearInterval(this.timer);
199    this.timer = setInterval(()=>{
200      opval--;
201      this.imageopacity = opval / 20
202      if (opval===0) {
203        clearInterval(this.timer)
204        this.imageopacity = 1
205      }
206    },100);
207  }
208}
209```
210
211![zh-cn_image_0000001188771430](figures/zh-cn_image_0000001188771430.gif)
212
213## 相关实例
214
215针对image开发，有以下相关实例可供参考：
216
217- [image、image-animator组件的使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJs)
218
219- [图片常见操作（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageOperation)