CODEWITHSUNDEEP
javascripthtmlvue.js
SpaceKuh
SpaceKuh

Reputation: 21

Image onload not being called in vue

I am trying to build a Vue App and I am new to Vue, I am trying to load an image at runtime in Js/Ts with the code below

console.log("code is being called");
let image = new Image();
image.onload = (event) => {
console.log("image loaded");
}
image.src = "static/prison_tileset.png";

The code works fine on a regular html file, in Vue however, the onload method isn't being called. The first console.log is being called. I am sure that the image is found because if I manipulate the path to something wrong on purpose I get an error that the file isn't being found. It's just that the onload event isn't being firied.

I'd be very happy if somebody could help me with that!

Upvotes: 1

Views: 1210

Answers (1)

SpaceKuh
SpaceKuh

Reputation: 21

I've gotten it to work now! I will answer the question myself as best as I can. To use local assets in view you have to load them via Webpack like this:

const Logo = require("../assets/logo.png");
this.image.src = Logo;

If you also happen to use electron you have to set the webSecurity in your entry file to false for electron to be allowed to access local files.

Upvotes: 1

Related Questions