使用p5.js的loadImage()无法加载部分外部网站图片求助

问题核心原因：跨域资源共享（CORS）限制 #

浏览器的安全机制会阻止脚本（如你的p5.js代码）从其他域名加载资源，除非目标服务器通过CORS响应头明确允许跨域请求。你测试的图片中，只有https://i.tpg.ua/...的服务器配置了允许跨域的头信息，因此能正常加载；其余图片的服务器未设置相关权限，导致浏览器直接拦截了加载请求。

快速验证方式 #

打开浏览器开发者工具（按F12），切换到「控制台」标签页，运行草图后会看到类似如下的错误提示：

Access to Image at 'https://breeze.ru/...' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这直接确认了是CORS限制导致的加载失败。

可行解决方案 #

1. 本地托管图片（最推荐） #

将需要使用的图片下载到本地，和p5.js草图放在同一目录下，用相对路径加载：

img = loadImage("port_exmouth_3.jpg");

这种方式完全避开跨域问题，稳定且安全。

2. 使用CORS代理服务器（仅用于测试） #

通过第三方代理转发图片请求，代理会自动添加必要的CORS头。例如在图片URL前加上代理前缀（注意：公共代理可能存在稳定性或安全风险）：

img = loadImage("https://corsproxy.io/?https://breeze.ru/files/images/port_exmouth_3.jpg");

3. 选择支持CORS的图片源 #

优先使用Imgur、Cloudinary等提供CORS支持的图片托管平台，这类服务的图片默认允许跨域加载。

4. 调试加载错误 #

可以在loadImage中添加回调函数，捕获加载失败的具体信息：

function preload() {
  img = loadImage("https://breeze.ru/...", 
    () => console.log("加载成功"), 
    (error) => console.log("加载失败：", error)
  );
}

内容的提问来源于stack exchange，提问作者hayabuzo