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