1# Image
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **Image** object is an image on the canvas.
8
9
10## Attributes
11
12| Name     | Type            | Default Value | Mandatory  | Description               |
13| ------- | -------------- | ---- | ---- | ----------------- |
14| src     | string         | -    | Yes   | Image resource path.         |
15| width   | <length> | 0px  | No   | Image width.           |
16| height  | <length> | 0px  | No   | Image height.           |
17| onload  | Function       | -    | No   | Function called when an image is successfully loaded. This function has no parameter.|
18| onerror | Function       | -    | No   | Function called when an image fails to be loaded. This function has no parameter.|
19
20
21## Example
22
23```html
24<!-- xxx.hml -->
25<div>
26  <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
27</div>
28```
29
30```js
31// xxx.js
32export default {
33    onShow() {
34        const el = this.$refs.canvas;
35        var ctx = el.getContext('2d');
36        var img = new Image();
37        // It is recommended that the image be stored in the common directory.
38        img.src = 'common/images/example.jpg';
39        img.onload = function () {
40            console.log('Image load success');
41            ctx.drawImage(img, 0, 0, 360, 250);
42        };
43        img.onerror = function () {
44            console.log('Image load fail');
45        };
46    }
47}
48```
49
50
51![1-9](figures/1-9.png)
52