i have an issue trying to load images form the assets folder to the canvas.
the path to the images are: /src/assets/1.jpg /src/assets/2.jpg /src/assets/3.jpg
my code:
<template>
<canvas id="CanvasTest" width="800" height="600"></canvas>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'CanvasTest',
data() {
return { images_src: ["/assets/1.jpg","/assets/2.jpg","/assets/3.jpg"] }
},
mounted() {
const canvas = document.getElementById('CanvasTest') as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
const img_w = 200;
const img_h = 100;
for (let i = 0; i < this.images_src.length; i++) {
const imgElement = new Image();
imgElement.src = this.images_src[i];
imgElement.onload = () => {
ctx.drawImage(imgElement, i*img_w, i*img_h, img_w, img_h);
};
}
},
});
</script>
<style>
#CanvasTest {
background-color: #555;
}
</style>
i get these error:
GEThttp://localhost:8080/assets/1.jpg [HTTP/1.1 404 Not Found 1ms]
GEThttp://localhost:8080/assets/2.jpg [HTTP/1.1 404 Not Found 3ms]
GEThttp://localhost:8080/assets/3.jpg [HTTP/1.1 404 Not Found 1ms]
image of the browser console with the errors
i found a solution which is to upload/move the images to the public folder, but i don't really like that. I would like to know if there are better ways to upload the images from the assets folder.
