如何在 Vue 3 中使用 p5.loadImage

Question

p5 docs 说明如何从资产文件夹加载图像。

但是我在我的 Vue 3 设置中使用 'instance mode' 并且任何使用 loadImage 的尝试都会导致 return 类型为“错误”的事件对象并且没有任何解释。

我试过：

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')
}

等等。

我知道图像存在，因为 <img src="./assets/rocket.jpg"> 正确渲染图像。

我错过了什么？

（在实例模式下关于 p5 的其他一切似乎工作正常。）

Answer 1

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

导入图片应该是 Webpack 的职责，而不是 p5.js

如何在 Vue 3 中使用 p5.loadImage

How to use p5.loadImage in Vue 3

p5.js

vuejs3