how to send png image from server to display in browser via ajax

Question

I have been having a hard time with what must be an incredibly normal task. I upload and save images to my web server and save the path to the file in MySQL data base (this is all working). The thing that doesn't work is fetching an image file from the server and displaying it on the page via ajax.

Originally I was trying to just retrieve the path from the database, and update an tag's src attribute with the path to the image. This was working, but this way all the images are in a folder on the server where people all have access to them. This is not good. I can only have the pictures that belong to certain users accessible by these users.

In order to restrict access to these photos I added an Apache directive on that folder, which successfully restricted access. The problem then became that I could not display the images in the browser by setting the src attribute to that path. See my post: https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

Finally I have learned that I have to use PHP to read the image data directly from the server and send this data to the browser. I have used the file_get_contents() function, which works to convert the image file (PNG) on the server into a string. I return this string to the browser in an ajax call. The thing I can't get is: how to convert this string back into an image using JavaScript?

See this code:

$.ajax({
    url: get_image.php,
    success: function(image_string){
        //how to load this image string from file_get_contents to the browser??
    }
});

Answer 1

You could display a default "no access" image to users who are forbidden to access the image:

<?php

$file = $_GET['file']; // don't forget to sanitize this!

header('Content-type: image/png');
if (user_is_allowed_to_access($file)) {
    readfile($file);
}
else {
    readfile('some/default/file.png');
}

And, on the client side:

<img src="script.php?file=path/to/file.png" />

---

Alternatively, if you really really want or need to send the data via Ajax, you can Base64 encode it:

<?php

echo base64_encode(file_get_contents($file));

And place the response in an img tag using the Data URI scheme

var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';

Given that the Base64 encoded data is significantly larger than the original, you could send the raw data and encode it in the browser using a library .

---

Does that make sense to you?

Answer 2

Instead of getting get_image.php through AJAX, why not just use:

<img src="get_image.php" />

It's practically the same thing. You can just use AJAX to update the <img> dynamically.

Answer 3

You can't do it via ajax.

You could do something like this:

<img src="script.php?image=image_name" />

Then use JavaScript to change the query string.

Answer 4

You can actually embed image data inside the img tag in the browser, therefore ajax code could look like this:

$.ajax({
    url: get_image.php,
    success: function(image_string){
        $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />);
    }
});

Note that you will need to write this base64_encode function. Have a look at this question - the function is given there.