时间戳

首页 > 解决方案 > 如何加载图像并绘制图像而不会出错

javascript - 如何加载图像并绘制图像而不会出错

问题描述

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

但我得到了 2 个错误第一个说

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

标签： javascriptimageloadingp5.js

解决方案

您的错误消息非常明确：

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')但这需要您在线托管图像，这需要网络服务器或托管服务。

推荐阅读