显示预加载的图像 (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 有一些关系，但这只是我的假设。

Answer 2

您的文件是本地托管的吗？ p5要访问图片等本地文件，需要localhosted...我推荐apache

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

Displaying preloaded image (p5.js)

javascript

canvas

p5.js