load事件在加载图像时不触发

Question

<template>
<div>
<canvas ref="myCanvas" class="gameScreen"></canvas>
</div>
</template>
<script>
export default {
name: 'GameScreen',
data() {
return {
canvas: null,
context: null,
};
},
mounted() {
this.canvas = this.$refs.myCanvas;
this.context = this.canvas.getContext('2d');
const img = new Image();
img.addEventListener('load', () => {
this.context.drawImage(img, 0, 0, 100, 100);
}, false);
img.src = '../assets/tiles.png';
},
};
</script>

onload函数没有被触发，我尝试在函数中放入控制台语句。谁能告诉我我做错了什么?

Answer 1

<template>
<div>
<canvas ref="myCanvas" class="gameScreen"></canvas>
</div>
</template>
<script>
import image from './assets/logo.png';
export default {
name: "GameScreen",
data() {
return {
canvas: null,
context: null,
};
},
mounted() {
this.canvas = this.$refs.myCanvas;
this.context = this.canvas.getContext("2d");
const img = new Image();
img.addEventListener("load", () => {
console.log("I am inside load");
this.context.drawImage(img, 0, 0, 100, 100);
});
img.addEventListener("error", (err) => {
console.log("error", err);
});
img.src = image;
},
};
</script>

如果相对路径不起作用，那么您可以先尝试导入它并使用它。