loadImage（）无法加载图像（P5.js WebGL）

我试图加载一个名为“border.bmp”的图像，以便我可以将它用作WebGL的纹理。这是我参考图像的方式。loadImage（）无法加载图像（P5.js WebGL）

var img; 
function preload() { 
    img = loadImage("assets/border.bmp"); 
}

然后我在控制台中得到这个错误。

Access to Image at 'file:///C:/P5.js/empty-example/assets/border.bmp' from 
origin 'null' has been blocked by CORS policy: Invalid response. Origin 
'null' is therefore not allowed access.

什么是此错误消息？这是什么意思？我如何加载图像？

来源

2017-10-14 Randy Matinee

解决方案是使用简单的网络服务器。这将花费你不到2分钟。 [这是一个]（https://greggman.github.io/servez/）和[这里有更多]（https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons -http - 服务器 - 或 - simplehttpserver）。服务你的p5.js文件夹，然后进入'http：// localhost：8080'或你决定使用的服务器的任何端口服务于 – gman

CORS代表Cross-origin resource sharing。默认情况下，WebGL将阻止任何外部来源的资源（图片，纹理等）。 WebGL认为本地资源来自外部源。

您可以通过使用img.crossOrigin = ""; 绕过这个我不是WebGL的专家，所有这些信息被发现here

来源

2017-10-14 11:13:21 Dale

谢谢你的回应;但是，这是在p5.js中编写的，这是一个JavaScript库，该代码不适用于我正在做的事情。它确实帮助我寻找解决方案。 –

通过GMAN和戴尔答案的评论均正确。我强烈建议你花点时间在你降低或解雇他们之前准确理解他们的意思。

CORS代表跨源资源共享，基本上它允许或阻止一个站点上的JavaScript访问另一个站点上的内容。快速谷歌搜索“JavaScript CORS”或只是“cors”会给你一大堆你应该阅读的信息。

因此，如果您收到CORS错误，这意味着拥有图片的网站不会让持有您代码的网站访问图片。在你的情况下，它看起来像你从file: URL加载的东西，这是从服务器加载的而不是。这就是错误意思的Origin null部分。

因此，第一步是听取gman的评论，并从本地网络服务器运行草图，而不是使用file:网址。他的评论已经包含解释如何做的链接，或者您可以使用the P5.js web editor或CodePen或任何其他基本Web主机。

最常见的设置是将图像文件包含在与代码相同的服务器中，因此应该几乎是所有您需要执行的操作。但是，如果您将图像存储在与代码不同的网址上，则第2步将遵循Dale的答案，并设置图像服务器以允许来自代码服务器的请求。

来源

2017-10-14 17:07:19

loadImage（）无法加载图像（P5.js WebGL）

回答

相关问题