vue中使用canvas引入图片，不让图片在外部显示

今天做canvas画图时碰到一个问题，当往canvas引入图片时需要在外部写一个图片代码为：

<template>
  <div>
    <canvas ref="canvasBox" class="canvas_style" width="360" height="220" ></canvas>
     <img src="../assets/image/tree.png" alt="" ref="treeImg">
  </div>
</template>

这样就会出现图片在canvas外部的问题：

这与咱想法不同，首先想到在vue可以通过new Image()的方法创建一个img对象然后加载进去：

let imgObj = new Image();
imgObj.src = "../assets/image/tree.png";
imgObj.onload = function(){
　　ctx.drawImage(this.$refs.treeImg,5,10);
}

这种方法在vue中仍不可用，后来想到disable：none的方法就可以实现了，代码如下：

<template>
  <div>
    <canvas ref="canvasBox" class="canvas_style" width="360" height="220" ></canvas>
    <div style="display:none">
        <img src="../assets/image/tree.png" alt="" ref="treeImg">
    </div>
  </div>
</template>