1# Image对象<a name="ZH-CN_TOPIC_0000001164290722"></a> 2 3图片对象。 4 5## 属性<a name="zh-cn_topic_0000001173164737_section1968021961113"></a> 6 7<a name="zh-cn_topic_0000001173164737_table1025010619328"></a> 8<table><thead align="left"><tr id="zh-cn_topic_0000001173164737_row163667603219"><th class="cellrowborder" valign="top" width="21.8%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164737_p536646193210"><a name="zh-cn_topic_0000001173164737_p536646193210"></a><a name="zh-cn_topic_0000001173164737_p536646193210"></a>属性</p> 9</th> 10<th class="cellrowborder" valign="top" width="22.34%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173164737_p7366166163213"><a name="zh-cn_topic_0000001173164737_p7366166163213"></a><a name="zh-cn_topic_0000001173164737_p7366166163213"></a>类型</p> 11</th> 12<th class="cellrowborder" valign="top" width="7.9799999999999995%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173164737_p143661564327"><a name="zh-cn_topic_0000001173164737_p143661564327"></a><a name="zh-cn_topic_0000001173164737_p143661564327"></a>默认值</p> 13</th> 14<th class="cellrowborder" valign="top" width="11.73%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173164737_p11366264324"><a name="zh-cn_topic_0000001173164737_p11366264324"></a><a name="zh-cn_topic_0000001173164737_p11366264324"></a>必填</p> 15</th> 16<th class="cellrowborder" valign="top" width="36.15%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173164737_p636619618325"><a name="zh-cn_topic_0000001173164737_p636619618325"></a><a name="zh-cn_topic_0000001173164737_p636619618325"></a>描述</p> 17</th> 18</tr> 19</thead> 20<tbody><tr id="zh-cn_topic_0000001173164737_row936656193210"><td class="cellrowborder" valign="top" width="21.8%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164737_p1436610643211"><a name="zh-cn_topic_0000001173164737_p1436610643211"></a><a name="zh-cn_topic_0000001173164737_p1436610643211"></a>src</p> 21</td> 22<td class="cellrowborder" valign="top" width="22.34%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164737_p4366156183210"><a name="zh-cn_topic_0000001173164737_p4366156183210"></a><a name="zh-cn_topic_0000001173164737_p4366156183210"></a>string</p> 23</td> 24<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164737_p193667616322"><a name="zh-cn_topic_0000001173164737_p193667616322"></a><a name="zh-cn_topic_0000001173164737_p193667616322"></a>-</p> 25</td> 26<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164737_p636611610320"><a name="zh-cn_topic_0000001173164737_p636611610320"></a><a name="zh-cn_topic_0000001173164737_p636611610320"></a>是</p> 27</td> 28<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164737_p13366106173215"><a name="zh-cn_topic_0000001173164737_p13366106173215"></a><a name="zh-cn_topic_0000001173164737_p13366106173215"></a>图片资源的路径。</p> 29</td> 30</tr> 31<tr id="zh-cn_topic_0000001173164737_row13366969325"><td class="cellrowborder" valign="top" width="21.8%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164737_p13366136183210"><a name="zh-cn_topic_0000001173164737_p13366136183210"></a><a name="zh-cn_topic_0000001173164737_p13366136183210"></a>width</p> 32</td> 33<td class="cellrowborder" valign="top" width="22.34%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164737_p73668623216"><a name="zh-cn_topic_0000001173164737_p73668623216"></a><a name="zh-cn_topic_0000001173164737_p73668623216"></a><length></p> 34</td> 35<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164737_p8366206123215"><a name="zh-cn_topic_0000001173164737_p8366206123215"></a><a name="zh-cn_topic_0000001173164737_p8366206123215"></a>0px</p> 36</td> 37<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164737_p636617633210"><a name="zh-cn_topic_0000001173164737_p636617633210"></a><a name="zh-cn_topic_0000001173164737_p636617633210"></a>否</p> 38</td> 39<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164737_p123661613324"><a name="zh-cn_topic_0000001173164737_p123661613324"></a><a name="zh-cn_topic_0000001173164737_p123661613324"></a>图片的宽度。</p> 40</td> 41</tr> 42<tr id="zh-cn_topic_0000001173164737_row103661365321"><td class="cellrowborder" valign="top" width="21.8%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164737_p163663610321"><a name="zh-cn_topic_0000001173164737_p163663610321"></a><a name="zh-cn_topic_0000001173164737_p163663610321"></a>height</p> 43</td> 44<td class="cellrowborder" valign="top" width="22.34%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164737_p03673613324"><a name="zh-cn_topic_0000001173164737_p03673613324"></a><a name="zh-cn_topic_0000001173164737_p03673613324"></a><length></p> 45</td> 46<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164737_p113674614326"><a name="zh-cn_topic_0000001173164737_p113674614326"></a><a name="zh-cn_topic_0000001173164737_p113674614326"></a>0px</p> 47</td> 48<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164737_p3367566327"><a name="zh-cn_topic_0000001173164737_p3367566327"></a><a name="zh-cn_topic_0000001173164737_p3367566327"></a>否</p> 49</td> 50<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164737_p43671663322"><a name="zh-cn_topic_0000001173164737_p43671663322"></a><a name="zh-cn_topic_0000001173164737_p43671663322"></a>图片的高度。</p> 51</td> 52</tr> 53<tr id="zh-cn_topic_0000001173164737_row18346152013215"><td class="cellrowborder" valign="top" width="21.8%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164737_p1033772416322"><a name="zh-cn_topic_0000001173164737_p1033772416322"></a><a name="zh-cn_topic_0000001173164737_p1033772416322"></a>onload</p> 54</td> 55<td class="cellrowborder" valign="top" width="22.34%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164737_p1337202419320"><a name="zh-cn_topic_0000001173164737_p1337202419320"></a><a name="zh-cn_topic_0000001173164737_p1337202419320"></a>Function</p> 56</td> 57<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164737_p137953293211"><a name="zh-cn_topic_0000001173164737_p137953293211"></a><a name="zh-cn_topic_0000001173164737_p137953293211"></a>-</p> 58</td> 59<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164737_p153471320113217"><a name="zh-cn_topic_0000001173164737_p153471320113217"></a><a name="zh-cn_topic_0000001173164737_p153471320113217"></a>否</p> 60</td> 61<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164737_p7337142443214"><a name="zh-cn_topic_0000001173164737_p7337142443214"></a><a name="zh-cn_topic_0000001173164737_p7337142443214"></a>图片加载成功后触发该事件，无参数。</p> 62</td> 63</tr> 64<tr id="zh-cn_topic_0000001173164737_row455917203329"><td class="cellrowborder" valign="top" width="21.8%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164737_p107821651123213"><a name="zh-cn_topic_0000001173164737_p107821651123213"></a><a name="zh-cn_topic_0000001173164737_p107821651123213"></a>onerror</p> 65</td> 66<td class="cellrowborder" valign="top" width="22.34%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164737_p147828514328"><a name="zh-cn_topic_0000001173164737_p147828514328"></a><a name="zh-cn_topic_0000001173164737_p147828514328"></a>Function</p> 67</td> 68<td class="cellrowborder" valign="top" width="7.9799999999999995%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164737_p19161175419328"><a name="zh-cn_topic_0000001173164737_p19161175419328"></a><a name="zh-cn_topic_0000001173164737_p19161175419328"></a>-</p> 69</td> 70<td class="cellrowborder" valign="top" width="11.73%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164737_p0559142083215"><a name="zh-cn_topic_0000001173164737_p0559142083215"></a><a name="zh-cn_topic_0000001173164737_p0559142083215"></a>否</p> 71</td> 72<td class="cellrowborder" valign="top" width="36.15%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164737_p1778212512329"><a name="zh-cn_topic_0000001173164737_p1778212512329"></a><a name="zh-cn_topic_0000001173164737_p1778212512329"></a>图片加载失败后触发该事件，无参数。</p> 73</td> 74</tr> 75</tbody> 76</table> 77 78## 示例<a name="zh-cn_topic_0000001173164737_section13457717134912"></a> 79 80``` 81var ctx = this.$element('drawImage').getContext('2d'); 82var img = new Image(); 83img.src = 'common/images/example.jpg'; 84img.onload = function() { 85 console.log('Image load success'); 86 ctx.drawImage(img, 0, 0, 360, 250); 87}; 88img.onerror = function() { 89 console.log('Image load fail'); 90}; 91``` 92 93 94 95
