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

画布已创建，但没有图像。

这是一个有效的例子：
https://stage.margenesdelarte.org/

画布位于页面的末尾（带有白色背景），但内部没有渲染图像图像路径是正确的，因为控制台中没有错误，可以在其位置到达：

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

您的文件是否为localhosted？要让p5访问本地文件（如图像），需要将其设置为localhosted ...我建议使用apache

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

2 个答案: