Vue.js Konva 库显示一个简单的图像，我错过了什么？

Question

所以我浏览了 vue-konva 页面上列出的示例代码。尽管它对创建形状进行了采样，但我对它的理解足以尝试显示一个简单的图像来开始。这是基本代码。我的问题在于如何将实际图像文件附加到“图像”属性。或者如果我错过了其他东西。

 <template>
  <div id="app">
    <h1>Display Image via Konva</h1>
    <div>
      <v-stage ref="stage" :config="configKonva">
        <v-layer ref="layer">
          <v-image :config="configImg"></v-image>
        </v-layer>
      </v-stage>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import VueKonva from 'vue-konva'
  Vue.use(VueKonva)

export default {
  data() {
    return {
      testImg: new Image(),
      configKonva: {
        width: 500,
        height: 500
      },
      configImg: {
        x: 20,
        y: 20,
        image: this.testImg,
        width: 200,
        height: 200,
      },
    }
  }
</script>

根据 Konva Docs，这是如何做到的：

var imageObj = new Image();
imageObj.onload = function() {
  var image = new Konva.Image({
    x: 200,
    y: 50,
    image: imageObj,
    width: 100,
    height: 100
  });
};
imageObj.src = '/path/to/image.jpg'

因此，我认为问题在于我如何将实际图像文件附加到图像属性。

I tried the all following:

#1
image: "/path/to/image.jpg"
#2
mounted(){
   this.testImg.src = "/path/to/image.jpg"
}
#3
data(){
  return{
    testImg: "/path/to/image.jpg"
    }
  }
}

似乎没有任何效果。我确定我缺少一个步骤。

Answer 1

诀窍似乎是通过将configImg 放入计算属性中来使其具有反应性，因为图像将在安装后加载。

export default {
  data() {
    return {
      testImg: new Image(100, 100),
      configKonva: {
        width: 200,
        height: 200
      }
    }
  },
  computed: {
    configImg: function() {
      return {
        x: 20,
        y: 20,
        image: this.testImg,
        width: 200,
        height: 200,
      }
    }
  },
  mounted() {
    this.testImg.src = "https://konvajs.github.io/assets/lion.png"
  }
}   

Answer 2

  mounted() {
    this.testImg.onload = () => this.$refs.layerImg.getStage().draw()
    this.testImg.src = "https://konvajs.github.io/assets/lion.png"
  }