0

Same image, just one is local, the other is online. Html displays the local image, but nothing on the canvas. 

<template>
    <div>
        <canvas id="canvas" width="300" height="227"></canvas>
        <img id="source" src="../assets/sprites/characters/rhino.jpg" style="border:solid red;">
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {},
    mounted () {
        this.$nextTick(() => {
            const ctx = document.getElementById('canvas').getContext('2d');

            const image = new Image(); 
            image.onload = drawImage;

            image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
            //image.src = '../assets/sprites/characters/rhino.jpg';

            function drawImage() {
                ctx.drawImage(this, 0, 0, 300, 227);
            }
        })
    }
}
</script>

If I uncomment the second image.src, canvas shows nothing. Guessing I'm missing something obvious. Done this a number of times outside of Vue. New to the framework and just grouped code for simplicity, guessing nextTick isn't needed, but tried whatever I could.

VirtualLife
  • 402
  • 5
  • 14
  • 1
    Try `image.src = require('../assets/sprites/characters/rhino.jpg')` – Phil Jun 12 '20 at 02:15
  • @Phil Seriously, how I didn't find that in my many hours of searching is beyond me. That worked. So simple, but not as obvious as I expected. If you want to post it as a reply, I will mark it as answered. – VirtualLife Jun 12 '20 at 02:21
  • 1
    I've marked it as a duplicate. If you accept it, the question can be closed – Phil Jun 12 '20 at 02:44

0 Answers0