1# Image对象 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12图片对象。 13 14 15## 属性 16 17| 属性 | 类型 | 默认值 | 必填 | 描述 | 18| ------- | -------------- | ---- | ---- | ----------------- | 19| src | string | - | 是 | 图片资源的路径。 | 20| width | <length> | 0px | 否 | 图片的宽度。 | 21| height | <length> | 0px | 否 | 图片的高度。 | 22| onload | Function | - | 否 | 图片加载成功后触发该事件，无参数。 | 23| onerror | Function | - | 否 | 图片加载失败后触发该事件，无参数。 | 24 25 26## 示例 27 28```html 29<!-- xxx.hml --> 30<div> 31 <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> 32</div> 33``` 34 35```js 36// xxx.js 37export default { 38 onShow() { 39 const el = this.$refs.canvas; 40 var ctx = el.getContext('2d'); 41 var img = new Image(); 42 // 图片路径建议放在common目录下 43 img.src = 'common/images/example.jpg'; 44 img.onload = function () { 45 console.log('Image load success'); 46 ctx.drawImage(img, 0, 0, 360, 250); 47 }; 48 img.onerror = function () { 49 console.error('Image load fail'); 50 }; 51 } 52} 53``` 54 55 56 57
