如何加载图像并在没有错误的情况下绘制图像

Question

im正在尝试用p5.jsloadImage(image);加载图像。我正在使用桌面上的p5库。我没有使用浏览器编辑器，当我使用浏览器编辑器时，它可以很好地处理加载

但我有两个错误，第一个说

Fetch API cannot load 
file:///C:/Users/3worl/OneDrive/Skrivebord/G_O_E/planet.jpg. URL scheme 
must be "http" or "https" for CORS request.

第二个是

p5.js:65680 Uncaught (in promise) TypeError: Failed to fetch

Answer 1

您的错误消息非常明确：

Fet API无法加载file:///C://.....URL方案必须是；http"；或"；https"；

您正试图访问一个文件，就像在窗口文件资源管理器中使用路径file:///C://...一样，该路径在javascript代码中不起作用。

如果你看loadImage()文档，你会读到：

图像的路径应该相对于草图中链接的HTML文件由于浏览器的内置安全性，从URL或其他远程位置加载图像可能会被阻止。

假设草图位于C:/Users/3worl/OneDrive/Skrivebord/G_O_E/sketch.js上，图像位于C:/Users/3worl/OneDrive/Skrivebord/G_O_E/assets/planet.jpg上，则需要使用loadImage('assets/planet.jpg')，即使用图像相对于草图的路径。

请注意，如果图像是在线托管的，也可以使用URL，如loadImage('https://earthsky.org/upl/2018/01/planet-artist.jpg')，但这需要您在线托管图像，这需要Web服务器或托管服务。