Image对象

About 2 min

Image对象

图片对象。

属性

属性

类型

默认值

必填

描述

src

string

-

图片资源的路径。

width

<length>

0px

图片的宽度。

height

<length>

0px

图片的高度。

onload

Function

-

图片加载成功后触发该事件,无参数。

onerror

Function

-

图片加载失败后触发该事件,无参数。

示例

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
1
2
3
4
//xxx.js
export default {
  onShow(){
    const el =this.$refs.canvas
    var ctx = this.$element('drawImage').getContext('2d');
    var img = new Image();
    img.src = 'common/images/example.jpg';
    img.onload = function() {
    console.log('Image load success');
    ctx.drawImage(img, 0, 0, 360, 250);
   };
    img.onerror = function() {
    console.log('Image load fail');
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16