1# Image<a name="EN-US_TOPIC_0000001115974752"></a> 2 3- [Attribute](#en-us_topic_0000001058948927_section1968021961113) 4- [Example](#en-us_topic_0000001058948927_section13457717134912) 5 6**Image** allows you to add an image. 7 8## Attribute<a name="en-us_topic_0000001058948927_section1968021961113"></a> 9 10<a name="en-us_topic_0000001058948927_table1025010619328"></a> 11<table><thead align="left"><tr id="en-us_topic_0000001058948927_row163667603219"><th class="cellrowborder" valign="top" width="21.73%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058948927_p536646193210"><a name="en-us_topic_0000001058948927_p536646193210"></a><a name="en-us_topic_0000001058948927_p536646193210"></a>Attribute</p> 12</th> 13<th class="cellrowborder" valign="top" width="22.41%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058948927_p7366166163213"><a name="en-us_topic_0000001058948927_p7366166163213"></a><a name="en-us_topic_0000001058948927_p7366166163213"></a>Type</p> 14</th> 15<th class="cellrowborder" valign="top" width="7.9799999999999995%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058948927_p143661564327"><a name="en-us_topic_0000001058948927_p143661564327"></a><a name="en-us_topic_0000001058948927_p143661564327"></a>Default Value</p> 16</th> 17<th class="cellrowborder" valign="top" width="11.73%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058948927_p11366264324"><a name="en-us_topic_0000001058948927_p11366264324"></a><a name="en-us_topic_0000001058948927_p11366264324"></a>Mandatory</p> 18</th> 19<th class="cellrowborder" valign="top" width="36.15%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058948927_p636619618325"><a name="en-us_topic_0000001058948927_p636619618325"></a><a name="en-us_topic_0000001058948927_p636619618325"></a>Description</p> 20</th> 21</tr> 22</thead> 23<tbody><tr id="en-us_topic_0000001058948927_row936656193210"><td class="cellrowborder" valign="top" width="21.73%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948927_p1436610643211"><a name="en-us_topic_0000001058948927_p1436610643211"></a><a name="en-us_topic_0000001058948927_p1436610643211"></a>src</p> 24</td> 25<td class="cellrowborder" valign="top" width="22.41%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948927_p4366156183210"><a name="en-us_topic_0000001058948927_p4366156183210"></a><a name="en-us_topic_0000001058948927_p4366156183210"></a>string</p> 26</td> 27<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948927_p193667616322"><a name="en-us_topic_0000001058948927_p193667616322"></a><a name="en-us_topic_0000001058948927_p193667616322"></a>-</p> 28</td> 29<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948927_p636611610320"><a name="en-us_topic_0000001058948927_p636611610320"></a><a name="en-us_topic_0000001058948927_p636611610320"></a>Yes</p> 30</td> 31<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948927_p13366106173215"><a name="en-us_topic_0000001058948927_p13366106173215"></a><a name="en-us_topic_0000001058948927_p13366106173215"></a>Image resource path</p> 32</td> 33</tr> 34<tr id="en-us_topic_0000001058948927_row13366969325"><td class="cellrowborder" valign="top" width="21.73%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948927_p13366136183210"><a name="en-us_topic_0000001058948927_p13366136183210"></a><a name="en-us_topic_0000001058948927_p13366136183210"></a>width</p> 35</td> 36<td class="cellrowborder" valign="top" width="22.41%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948927_p73668623216"><a name="en-us_topic_0000001058948927_p73668623216"></a><a name="en-us_topic_0000001058948927_p73668623216"></a><length></p> 37</td> 38<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948927_p8366206123215"><a name="en-us_topic_0000001058948927_p8366206123215"></a><a name="en-us_topic_0000001058948927_p8366206123215"></a>0px</p> 39</td> 40<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948927_p636617633210"><a name="en-us_topic_0000001058948927_p636617633210"></a><a name="en-us_topic_0000001058948927_p636617633210"></a>No</p> 41</td> 42<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948927_p123661613324"><a name="en-us_topic_0000001058948927_p123661613324"></a><a name="en-us_topic_0000001058948927_p123661613324"></a>Image width</p> 43</td> 44</tr> 45<tr id="en-us_topic_0000001058948927_row103661365321"><td class="cellrowborder" valign="top" width="21.73%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948927_p163663610321"><a name="en-us_topic_0000001058948927_p163663610321"></a><a name="en-us_topic_0000001058948927_p163663610321"></a>height</p> 46</td> 47<td class="cellrowborder" valign="top" width="22.41%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948927_p03673613324"><a name="en-us_topic_0000001058948927_p03673613324"></a><a name="en-us_topic_0000001058948927_p03673613324"></a><length></p> 48</td> 49<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948927_p113674614326"><a name="en-us_topic_0000001058948927_p113674614326"></a><a name="en-us_topic_0000001058948927_p113674614326"></a>0px</p> 50</td> 51<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948927_p3367566327"><a name="en-us_topic_0000001058948927_p3367566327"></a><a name="en-us_topic_0000001058948927_p3367566327"></a>No</p> 52</td> 53<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948927_p43671663322"><a name="en-us_topic_0000001058948927_p43671663322"></a><a name="en-us_topic_0000001058948927_p43671663322"></a>Image height</p> 54</td> 55</tr> 56<tr id="en-us_topic_0000001058948927_row18346152013215"><td class="cellrowborder" valign="top" width="21.73%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948927_p1033772416322"><a name="en-us_topic_0000001058948927_p1033772416322"></a><a name="en-us_topic_0000001058948927_p1033772416322"></a>onload</p> 57</td> 58<td class="cellrowborder" valign="top" width="22.41%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948927_p1337202419320"><a name="en-us_topic_0000001058948927_p1337202419320"></a><a name="en-us_topic_0000001058948927_p1337202419320"></a>Function</p> 59</td> 60<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948927_p137953293211"><a name="en-us_topic_0000001058948927_p137953293211"></a><a name="en-us_topic_0000001058948927_p137953293211"></a>-</p> 61</td> 62<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948927_p153471320113217"><a name="en-us_topic_0000001058948927_p153471320113217"></a><a name="en-us_topic_0000001058948927_p153471320113217"></a>No</p> 63</td> 64<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948927_p7337142443214"><a name="en-us_topic_0000001058948927_p7337142443214"></a><a name="en-us_topic_0000001058948927_p7337142443214"></a>Called when an image is successfully loaded. This function has no parameter.</p> 65</td> 66</tr> 67<tr id="en-us_topic_0000001058948927_row455917203329"><td class="cellrowborder" valign="top" width="21.73%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948927_p107821651123213"><a name="en-us_topic_0000001058948927_p107821651123213"></a><a name="en-us_topic_0000001058948927_p107821651123213"></a>onerror</p> 68</td> 69<td class="cellrowborder" valign="top" width="22.41%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948927_p147828514328"><a name="en-us_topic_0000001058948927_p147828514328"></a><a name="en-us_topic_0000001058948927_p147828514328"></a>Function</p> 70</td> 71<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948927_p19161175419328"><a name="en-us_topic_0000001058948927_p19161175419328"></a><a name="en-us_topic_0000001058948927_p19161175419328"></a>-</p> 72</td> 73<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948927_p0559142083215"><a name="en-us_topic_0000001058948927_p0559142083215"></a><a name="en-us_topic_0000001058948927_p0559142083215"></a>No</p> 74</td> 75<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948927_p1778212512329"><a name="en-us_topic_0000001058948927_p1778212512329"></a><a name="en-us_topic_0000001058948927_p1778212512329"></a>Called when an image fails to be loaded. This function has no parameter.</p> 76</td> 77</tr> 78</tbody> 79</table> 80 81## Example<a name="en-us_topic_0000001058948927_section13457717134912"></a> 82 83``` 84var ctx = this.$element('drawImage').getContext('2d'); 85var img = new Image(); 86img.src = 'common/image/huawei.jpg'; 87img.onload = function() { 88 console.log('Image load success'); 89 ctx.drawImage(img, 200, 200); 90}; 91img.onerror = function() { 92 console.log('Image load fail'); 93}; 94``` 95 96
