如何在JavaScript/p5.js/HTML中访问本地图像

Question

我想在JavaScript (p5.js)中显示本地文件夹中的图像文件。每次我尝试的时候都会得到：Access to image at "XXXXX" from origin "null" has been block by CORS policy: The response is invalid.

js和图像都在文件树中，在媒体服务器的项目文件夹中。

它们必须在本地运行。除了他们所在的文件夹之外，从任何其他位置运行都不是一种选择(指的是许多关于运行web服务器的答案。

function setup() {
  createCanvas(96, 192);
  img = loadImage('images/square1-01.png'); // Load the image
}

function draw() {
  image(img, 0, 0);
}

//ALSO TRIED

img = loadImage('file://images/square1-01.png'); // Load the image

上面的文本是一个超级简化的版本，我将它从主文件中分离出来，这样我就可以独立运行它，这样我就可以在开始添加其他复杂性层之前获得一个图像。因此，布局完全来自于教程。

相关文件包括：

.../web/d3test.html

.../web/d3test.js

.../web/images/square1-01

.../web/images/square2-01

.../web/images/square3-01

Answer 1

出于安全原因，JavaScript被禁止访问这样的本地文件。你不会想让每个网站都偷看你硬盘上的文件吧。这就是导致你的错误的原因。

您需要从web服务器访问文件，而不是访问本地硬盘上的文件。你可以上传你的素描(连同你的图片)到一个网络主机。无耻的自我推销：here是一个介绍一些托管选项的教程。

您也可以使用P5.js editor。这是一个用于P5.js的免费编辑器，可以自动将所有内容上传到web主机。你可以在那里工作的很好。

您还可以运行自己的本地web服务器。

如果你真的，真的，真的需要在没有web服务器的情况下运行它，那么你可以尝试在this answer中描述的File API，或者在你的浏览器中找到this answer中描述的设置。