I have this link from Instagram API Documentation from rapidapi:

https://scontent.cdninstagram.com/v/t51.2885-15/e35/269712310_436481731535085_8695389625620774366_n.jpg?se=7&_nc_ht=scontent.cdninstagram.com&_nc_cat=109&_nc_ohc=HfWwIW5-x70AX9BJWBL&edm=APU89FABAAAA&ccb=7-4&ig_cache_key=MjczNDM4MTI4ODc3MDQwNTM0NQ==.2-ccb7-4&oh=00_AT8uLNghm5TV3utSE-zgMc8906FeybBezkArruEr9yh8Jg&oe=61CB3215&_nc_sid=86f79a

when i put this link in the image tag it gives me an error:

"GET https://scontent.cdninstagram.com/v/t51.2885-15/e35/269712310_436481731535085_8695389625620774366_n.jpg?se=7&_nc_ht=scontent.cdninstagram.com&_nc_cat=109&_nc_ohc=HfWwIW5-x70AX9BJWBL&edm=APU89FABAAAA&ccb=7-4&ig_cache_key=MjczNDM4MTI4ODc3MDQwNTM0NQ==.2-ccb7-4&oh=00_AT8uLNghm5TV3utSE-zgMc8906FeybBezkArruEr9yh8Jg&oe=61CB3215&_nc_sid=86f79a net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200"

Do you know guys how to fix this? How can i display the image in my website. Please if You Can Help!!

CodePudding user response：

Something like this:

<?php

$image = file_get_contents("https://scontent.cdninstagram.com/v/t51.2885-15/e35/269712310_436481731535085_8695389625620774366_n.jpg?se=7&_nc_ht=scontent.cdninstagram.com&_nc_cat=109&_nc_ohc=HfWwIW5-x70AX9BJWBL&edm=APU89FABAAAA&ccb=7-4&ig_cache_key=MjczNDM4MTI4ODc3MDQwNTM0NQ==.2-ccb7-4&oh=00_AT8uLNghm5TV3utSE-zgMc8906FeybBezkArruEr9yh8Jg&oe=61CB3215&_nc_sid=86f79a");
$imageData = base64_encode($image);
echo '<img src="data:image/jpeg;base64,'.$imageData.'">';

CodePudding user response：

Sounds like a CORS problem to me. You can bypass CORS for img elements, I believe:

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

by giving the img element a crossorigin property valued 'anonymous':

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin

but I believe that if the property is present and the value isn't specified the default is anonymous.