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??
    }
});

Why not just update teh src attribute of an img tag with javascript? You can have teh src point to a php script that accepts integer values that map to images and have the PHP script server side echo the file content back. — GordonM, Sep 10 '12 at 16:53
You could make the src of the image be the php file: `` Then use PHP to output the image directly — Patrick Q, Sep 10 '12 at 16:57
In .Net, we would make a request handler that would take a parameter and return the content as if it were a normal request. I'm not familiar enough with PHP to know if there is something similarly available, but I'm sure something could be done. The basic concept is that you set the url of the image/background-image CSS to something like: `http://myserver.com/getfile.php?q=myimage.jpg` The server then opens the file, gets the contents, and sends it as a normal httpresponse. — Shmiddty, Sep 10 '12 at 17:04

Alexei · Accepted Answer · 2012-09-11T10:04:58.883

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?

score 4 · Answer 2 · answered Sep 10 '12 at 16:58

4

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.

answered Sep 10 '12 at 16:58

rationalboss

5,225
3
28
48

score 2 · Answer 3 · answered Sep 10 '12 at 16:56

2

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.

answered Sep 10 '12 at 16:56

Korikulum

2,359
19
24

score 1 · Answer 4 · edited May 23 '17 at 12:17

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.

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

4 Answers4

Linked