无法从URL中loadImage()

Question

我尝试将一个文件从随机网站转到我的草图中，但由于某种原因，它在很多情况下都不起作用：

​

function preload() {

  img = loadImage("https://i.tpg.ua/news/news_20190724_103144_1563953504.jpg"); // <- this URL works fine

  // uncomment any of these lines to see the problem:

  //img = loadImage("https://breeze.ru/files/images/port_exmouth_3.jpg");
  //img = loadImage("https://www.ticketswhales.com/wp-content/uploads/2021/01/Whales-Watching9-1100x1100.jpg");
  //img = loadImage("https://i-foto-oboy.ru/pixes/ware/big/f03d7c2c05d2bbe348abd63e847a99c5.jpg");
  //img = loadImage("https://glazamidrona.ru/wa-data/public/shop/img/snimok-ekrana-2020-04-29-v-19.06.19.png");
  //img = loadImage("https://i.ytimg.com/vi/r-utuoM77zI/maxresdefault.jpg");

}

function setup() {
  createCanvas(300, 300);
  image(img, 0, 0, width, height);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

​

以上链接的所有图片都可以在浏览器中查看或下载，我不明白它们之间的区别是什么，以及为什么它们中的大多数不能在草图中加载。

Answer 1

p5.js says: It looks like there was a problem loading your image. Try checking if the file path (https://www.ticketswhales.com/wp-content/uploads/2021/01/Whales-Watching9-1100x1100.jpg) is correct, hosting the file online, or running a local server.

如果没有代理(如https://cors-anywhere.herokuapp.com/corsdemo或拥有具有正确来源策略的服务器)或更改CORS问题上的浏览器设置，就不能绕过CORS。

access-control-allow-origin:

https://i.tpg.ua/news/news_20190724_103144_1563953504.jpg

Sec-获取模式:无cors

Sec-获取-站点:相同来源：

https://breeze.ru/files/images/port_exmouth_3.jpg

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

https://developer.chrome.com/blog/referrer-policy-new-chrome-default/