p5.js - How to use p5.loadImage in Vue 3

Question

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.)

question from:https://stackoverflow.com/questions/65872746/how-to-use-p5-loadimage-in-vue-3

Answer 1

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

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