Холст не рисует изображения - Electron + Vue

Question

Пытаюсь рисовать изображения на своем холсте, но по какой-то причине не получается. Я пробовал использовать API Canvas по умолчанию, KonvaJS и FabricJS, но ни один из них не работал. Другие формы, такие как прямоугольники, круги и т. Д., Работают нормально...

Мой проект - электронное приложение, созданное с помощью электронного конструктора через Vue Cli.

Код с 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" в "общую" папку, и все заработало.