javascript - 显示预加载的图像 (p5.js)

Question

我正在尝试使用 p5.js 库(实例化模式)基本显示预加载图像:

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

Canvas 已创建，但其中没有图像。

这是一个工作示例:
https://stage.margenesdelarte.org/

Canvas 位于页面末尾(白色背景)，但内部没有渲染任何图像。
图像路径是正确的，因为控制台中没有错误并且可以在其位置访问它:

https://stage.margenesdelarte.org/app/themes/mrg/dist/images/tramas/example.jpg

出了什么问题，如何显示该图像？谢谢!

Answer 1

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

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

https://codepen.io/anon/pen/yPENXx?editors=1111

说明:p 和 canvas 都有一个 image 函数，但是图像函数不同。您必须使用p.image()。我认为 canvas.image() 与 https://p5js.org/reference/#/p5.Image 有一些关系，但这只是我的假设。