画布无法绘制图像-电子+ Vue

Question

我正在尝试在画布上绘制图像，但是由于某些原因，它无法正常工作。我尝试使用默认的canvas API，KonvaJS和FabricJS，但这些都不起作用。其他形状（如矩形，圆形等）正常工作...

我的项目是通过Vue Cli用电子生成器构建的电子应用程序。

具有默认canvas API的代码：

<template>
  <div>
    <canvas ref="cnv" width="500" height="500"></canvas>
  </div>
</template>

<script>
export default {
  name: 'Test',
  mounted() {
    let cnv = document.querySelector("canvas");
    let ctx = cnv.getContext("2d");

    let img = new Image()
    img.src = "./img.png"

    img.onload = () => ctx.drawImage(img, 10, 10);
  }
}
</script>

使用KonvaJS的代码：

<template>
  <div id="cnv"></div>
</template>

<script>
import Konva from 'konva'

export default {
  name: 'Test',
  mounted() {
    let stage = new Konva.Stage({
      container: 'cnv',
      width: 500,
      height: 500,
    })

    let layer = new Konva.Layer()
    stage.add(layer)

    // Doesn't work with "fromUrl" method too
    let image = new Image()
    image.src = 'img.png'

    image.onload = () => {
      let img = new Konva.Image({
        x: 20,
        y: 20,
        width: 32,
        height: 48,
        image: image,
      })

      layer.add(img)
      layer.draw()
    }
  }
}
</script>

FabricJS的代码：

<template>
  <div>
    <canvas ref="cnv" width="500" height="500"></canvas>
  </div>
</template>

<script>
import { fabric } from 'fabric'

export default {
  name: 'Test',
  mounted() {
    const ref = this.$refs.cnv
    const canvas = new fabric.Canvas(ref)

    fabric.Image.fromURL('img.png', function(img) {
      img.set({
        left: 20,
        top: 20,
      })

      canvas.add(img)
    })
  }
}
</script>

[代码沙箱中的示例：draw-image-test

这是我做错了，还是这是个严重的问题？

Answer 1

我将“资产”文件夹移至“公共”文件夹，并且可以正常工作。