cannot loadImage() from URL-CodePudding

I try to loadImage() a file from random website to my sketch, but for some reason it doesn't work in lot of cases:

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>

All images by links above can be viewed in browser or be downloaded, I don't understand what is the difference between them and why most of them can't be loaded in sketch.

CodePudding user response：

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.

You can't bypass CORS without proxy like https://cors-anywhere.herokuapp.com/corsdemo OR own server with right origin policy OR change browser settings on CORS issue.

access-control-allow-origin:

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

Sec-Fetch-Mode: no-cors

Sec-Fetch-Site: same-origin:

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/