Instagram-php-scraper: image doesn't show on web

[fmchan]

i fetch posts by getMediasByTag and use to list the post image. it works perfect all the time but today i run it and images are not shown. when i paste the url to browser, the image works. it's a weird case and i wish to find out solution. thank you

[rikless]

I think we will have issue.

https://stackoverflow.com/questions/44572387/failed-to-load-resource-neterr-blocked-by-response

[Gugiman]

Quick solution:
Load the image via cUrl and use it base64 encoded.
Like this:
<img src="data:image/png;base64, {BASE64_ENCODED_IMG}" >

[adrianosmateus]

Got the same problem here. Did the copy workaround until the plugin bypasses it.

[restyler]

The same issue was reported recently on proxified fork of this scraper ( https://github.com/restyler/instagram-php-scraper ).

The StackOverflow link above is not exactly correct, it mentions different header related to iframes.

Instagram now sets cross-origin-resource-policy: same-origin if it doesn't like the "referer" which your browser sends to cdninstagram domain when loading image.

Base64 embedding suggested above will make your html page very heavy, especially if you render image feed with bigger thumbnails. It will also block the execution of PHP while it downloads each image, so if you have 10 images and downloading each takes 1 second, your page open time will become 10 seconds slower.
Better approach might be to create a simple image proxy which will download the image from instagram server to your server, and then output it to the browser. This way the headers issue will be mitigated.

Here is an example of CloudFlare image proxy:

https://gist.github.com/restyler/6c51e3ad20d7596e799d76e87cf93236

Not that efficient, but easier to setup, PHP implementation:

https://github.com/restyler/inwidget/blob/master/imgproxy.php

It might be a good idea to add additional caching layer on the proxy to reduce the amount of duplicate image requests to instagram cdn servers.

When you have your image proxy running, you just need to replace all instagram image srcs to the proxified versions.

[sagitaire123]

Same issue here, @raiym any update planned to work around this ?

[veuxx]

i'm usando @copy of php and hosting the images on my own server, in an improvised cache system. So I avoid multiple calls to the instagram server

[sagitaire123]

Quick solution:
Load the image via cUrl and use it base64 encoded.
Like this:
<img src="data:image/png;base64, {BASE64_ENCODED_IMG}" >

@Gugiman How to implement this on the library please ?

[veuxx]

Solução rápida:
carregue a imagem via cUrl e use-a codificada em base64.
Como isso:
<img src="data:image/png;base64, {BASE64_ENCODED_IMG}" >

@Gugiman Como implementar isso na biblioteca, por favor?

After obtaining the image link, simply encode it in base64.
Like:

$image = 'http://img.instagram.com/profile/myphoto.jpg';
$imageData = base64_encode(file_get_contents($image));

$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

echo '<img src="'.$src.'">';

You can create a function, for facility...

function encodeimg($url){

    $imageData = base64_encode(file_get_contents($url));
    $src = 'data: '.mime_content_type($url).';base64,'.$imageData;
    return $src;
}

Use like:
<img src="<?=encodeimg($string_of_link_img);?>"

[Gugiman]

@sagitaire123 Solution from @veuxx is indeed easier by using file_get_contents instead of cUrl

[sagitaire123]

@Gugiman @veuxx Perfect thank you, it works

[Frostbourn]

Any JS solution?

[Gugiman]

Maybe something like this?
https://medium.com/front-end-weekly/fetching-images-with-the-fetch-api-fb8761ed27b2

But I'm not quite sure if js within a browser will be check for CORS again.

[esvikas]

And what is the solution for the displaying the video from Instagram?