Javascript processing.js为什么图像不显示？_Javascript_Html_Processing.js

Javascript processing.js为什么图像不显示？

javascript html

Javascript processing.js为什么图像不显示？,javascript,html,processing.js,Javascript,Html,Processing.js,我想在canva上显示一个图像，我使用processing.js来完成，但它不起作用。 canva工作正常，但只有图像无法显示。这是我的代码： <!DOCTYPE html> <html> <head> <title>Processing.JS inside Webpages: Template</title> </head> <body> <p

我想在canva上显示一个图像，我使用processing.js来完成，但它不起作用。 canva工作正常，但只有图像无法显示。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Processing.JS inside Webpages: Template</title> 
    </head>
    <body>
        <p align="center">
            <canvas id="mycanvas"></canvas> 
        </p>
    </body>
    <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js">
    </script> 
    <script>
        var sketchProc = function(processingInstance) 
        {
            with (processingInstance) 
            {
        setup = function() 
        {
                   size(500, 400);
                   frameRate(30);
        };
        draw = function() 
        {
            background(255, 255, 255);
            image(loadImage('file:///C:/Users/acer/Desktop/New%20folder%20(2)/a.jpg'), 200, 200);
        };
            }
        };

        var canvas = document.getElementById("mycanvas");
        var processingInstance = new Processing(canvas, sketchProc);
    </script>
</html>

有人能告诉我为什么吗？

首先，您不应该像那样从draw函数调用loadImage。这将导致每秒加载图像60次，这是非常浪费的

您应该只从setup函数调用loadImage一次，并确保有一个preload命令

但是您的问题是由于JavaScript不能访问这样的本地文件。loadImage函数需要一个URL：指向图像文件的完整URL，或者指向与草图相同目录结构中的图像的相对URL。下文对此进行了解释：

注意：某些浏览器不允许您从文件：//URIs加载图像。建议您在开发和测试时使用Web服务器，以避免与file://uri有关的任何问题

还有一个注意事项：你需要养成检查的习惯。我敢打赌，这里显示的错误可能会向您解释所有这些。

您必须启动服务器，javascript无法访问本地文件。请使用代码段编辑器创建一个代码段，并从中创建一个图像