FabricJS image in vue component not appearing

Question

I want to use manipulate images on a canvas with FabricJS inside a VueJS app. In my view component, I am passing in a prop called background and using fabric.Image.fromURL() to load it onto the canvas, but nothing is appearing:

<template>
  <div>
    <h1>Edit Game</h1>
    <canvas id="game-board" width="400px" height="400px"></canvas>

    <img :src="background" width="100px" height="100px">
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fabric } from 'fabric'

export default {
  mounted() {
    let canvas = new fabric.Canvas('game-board');

    fabric.Image.fromURL(this.background, function(oImg) {
      canvas.add(oImg);
    });
  },

  computed: {
    ...mapGetters([
      'background'
    ])
  }
}
</script>

In the attached image, you'll see background is being loaded properly into an img tag but not into the canvas.

canvas and image.

This Code Sandbox works, but doing nearly the exact same thing locally does not.

Answer 1

Add image only on load

  const image = new window.Image()
  image.src = this.image_link
  image.onload = () => {
    let imgInstance = new fabric.Image(image, {
      left: 0,
      top: 0,
    })
    imgInstance.scaleToWidth(this.canvas.getWidth())
    this.lockElementMovement(imgInstance)
    this.canvas.add(imgInstance)
  }