• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \<image> Development
2
3The **\<image>** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
4
5
6## Creating an \<image> Component
7
8Create an **\<image>** component in the .hml file under **pages/index**.
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![en-us_image_0000001223127736](figures/en-us_image_0000001223127736.png)
29
30
31## Setting the Image Style
32
33Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of the image.
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![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
66
67
68## Loading the Image
69
70When the image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure log is printed.
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![en-us_image_images](figures/en-us_image_images.gif)
124
125
126
127## Example Scenario
128
129In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **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![en-us_image_0000001267607905](figures/en-us_image_0000001267607905.gif)
206