Javascript 显示预加载的图像（p5.js）

我正在尝试使用p5.js库（实例化模式）基本显示预加载的图像：

画布已创建，但没有图像

下面是一个工作示例：

画布位于页面的末尾（白色背景），但内部不呈现图像。
映像路径是正确的，因为控制台中没有错误，可以在其位置访问它：

有什么问题，如何显示此图像？谢谢

这是正确的版本吗？（我使用BASE64是因为我不想运行本地服务器）

说明：

p

和

canvas

都有

image

功能，但有不同的图像功能。您必须使用

p.image（）

。我认为

canvas.image（）

is与有些关系，但这只是我的假设。

这是正确的版本吗？（我使用BASE64是因为我不想运行本地服务器）

说明：

---

p

和

canvas

都有

image

功能，但有不同的图像功能。您必须使用

p.image（）

。我认为

canvas.image（）

is与有一些关系，但这只是我的假设。

您的文件是本地托管的吗？对于p5来说，要访问图像等本地文件，它需要本地托管。。。我建议您使用apache，您的文件是本地托管的吗？对于p5来说，要访问图像等本地文件，它需要本地托管。。。我推荐apache

您在网络面板中看到对该映像的请求了吗？确实没有。没有对该映像的请求。您在网络面板中看到对该映像的请求了吗？确实没有。没有对该图像的请求。这是正确的答案，但是请添加一个关于为什么它是正确答案的解释，而不是在没有解释的情况下转储一些代码。它是有效的，因此，无论如何，谢谢你。我估计我不能将画布存储为指针。这是正确的答案，但请添加一个解释，说明为什么它是正确的答案，而不是只是在没有解释的情况下转储一些代码。它是有效的，因此，无论如何，谢谢你。我估计我不能将画布存储为指针。

var sketch = function(p) {
    var fondo;
    p.preload = function() {
        fondo = p.loadImage('app/themes/mrg/dist/images/tramas/example.jpg');
    };
    var viewportWidth = $(window).width();
    p.setup = function(){
        canvas = p.createCanvas(viewportWidth, 200);
        canvas.background(255);
        canvas.image(fondo, 0, 0);
    };
};
new p5(sketch);

var sketch = function(p) {
    var fondo;
    p.preload = function() {
        fondo = p.loadImage("data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7");
    };
    var viewportWidth = 500;
    p.setup = function(){
        var canvas = p.createCanvas(viewportWidth, 200);
        canvas.image(fondo, 0, 0); // doesn't work
        p.image(fondo, 0, 0);      // works fine
        console.log(p.image, canvas.image); //there are different functions
    };
};
new p5(sketch);