How to use p5.loadImage in Vue 3

user_13942918 0
Viewed 408

The p5 docs state how to load an image from the assets folder.

However I am using 'instance mode' in my Vue 3 setup and any attempt to use loadImage is resulting in the return of an Event object of type"error" and no explanation.

I have tried:

const script = p5 => {
    ...
    this.assets.rocket = p5.loadImage('./assets/rocket.jpg')
    this.assets.rocket = p5.loadImage('~assets/rocket.jpg')
    this.assets.rocket = p5.loadImage('@/assets/rocket.jpg')
}

and so on.

I know the image exists as <img src="./assets/rocket.jpg"> renders the image correctly.

What have I missed?

(Everything else regarding p5 in instance mode appears to be working fine.)

vuejs3 p5.js
1 Answers

Try p5.loadImage(require('@/assets/rocket.jpg'))?

Importing image should be a Webpack responsibility, not p5.js

user_109486150
Related