Make image on linked page show in image source - php

Question

I'm attempting to write a small image proxier script on my website, because imgur is blocked on my current network and want to be able to see images from Stack Overflow.
I've got this code on my personal website:
$image = $_GET['url'];
$imageData = base64_encode(file_get_contents($image));
echo '<img src="data:image/jpeg;base64,'.$imageData.'">';
This should take the URL of an image, have my server download the image and then display it (by itself) on the page.
This works, for example, if I was trying to proxy my Stack Overflow account profile picture, I could use this link, which, as you can see works totally fine to display the picture on the page. I can see this image even on my blocked network.
Now, I've created a userscript that automatically transverses all images and links on a loaded page, and switches it's source/href link with a proxied version.
This is the part that is not working for me, when supplied with a proxied link, the image does not show in the element.
Here is my userscript:
function runProxier() {
$('img').each(function() {
var image = $(this);
if(!image.data('image_proxier_converted')) {
image.attr('src', getProxyLink(image.attr('src')));
image.attr('data-image_proxier_converted', 1);
}
});
$('a').each(function() {
var link = $(this);
if(!link.data('image_proxier_converted')) {
link.attr('href', getProxyLink(link.attr('href')));
link.attr('data-image_proxier_converted', 1);
}
});
}
function getProxyLink(givenLink) {
if (givenLink) {
if (replace_from.some(function(v) {
return givenLink.indexOf(v) >= 0;
})) {
return proxy_link + encodeURI(givenLink);
} else {
return givenLink;
}
}
}
When ran on my example, my profile picture, the link is properly converted.
<img src="//grumpycrouton.com/other/image_proxy/?url=https://i.stack.imgur.com/YkRwP.png?s=48&g=1" alt="" width="24" height="24" class="-avatar js-avatar-me" data-image_proxier_converted="1">
But the image does not show, it's still blank in my menu bar.
Why is my image not displayed?

Answer 1

I was able to resolve this problem by using this code on my server:
<?php
if(!isset($_GET['url'])) {
die('No image given');
}
header('Content-Type: image/jpeg');
readfile($_GET['url']);
?>
The header() call tells the client that it should serve an image, and readfile() will download (but not store on my server) and display the image.
I also noticed my URL was not properly encoding to be sent to the server, so I altered my userscript like so:
function getProxyLink(givenLink) {
if (givenLink) {
if (replace_from.some(function(v) {
return givenLink.indexOf(v) >= 0;
})) {
var new_link = proxy_link + encodeURIComponent(givenLink);
console.log(new_link);
return new_link;
} else {
return givenLink;
}
}
}