画布不绘制图像 - Electron + Vue

Question

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

我的项目是一个电子应用程序，通过 Vue Cli 使用 electron-builder 构建。

使用默认画布 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>

CodeSandbox 中的示例：draw-image-test

是我做错了什么，还是vue的问题？

Answer 1

我将“assets”文件夹移动到“public”文件夹中，并且成功了。