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.
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/
