1# Image 2 3**Image** allows you to add an image. 4 5## Attributes 6 7 8 9| Name | Type | Default Value | Mandatory | Description | 10| ------- | -------- | ------------- | --------- | ------------------------------------------------------------ | 11| src | string | - | Yes | Image resource path. | 12| width | \<length> | 0px | No | Image width. | 13| height | \<length> | 0px | No | Image height. | 14| onload | Function | - | No | Called when an image is successfully loaded. This function has no parameter. | 15| onerror | Function | - | No | Called when an image fails to be loaded. This function has no parameter. | 16 17## Example 18 19``` 20<!-- xxx.hml --> 21<div> 22 <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> 23</div> 24//xxx.js 25export default { 26 onShow(){ 27 const el =this.$refs.canvas 28 var ctx =el.getContext('2d'); 29 var img = new Image(); 30 img.src = 'common/images/example.jpg'; 31 img.onload = function() { 32 console.log('Image load success'); 33 ctx.drawImage(img, 0, 0, 360, 250); 34 }; 35 img.onerror = function() { 36 console.log('Image load fail'); 37 }; 38 } 39} 40``` 41 42
