why does my LAMP stack show my image when I navigate to it w/ a URL but not when I load it w/jQuery and PHP

Question

I have a php file at path/renderer/renderImage.php that builds and returns a PNG image to the browser. When I navigate to that URL with my browser, it dumps the correct image on the screen. But when I try to load that image into a DIV with jQuery using the code below from path/index.html ...

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        ....
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="../jquery.colorbox.js"></script>
        <script>
            $.colorbox({
                width:"30%", 
                inline:true, 
                href:"#inline_content",
                onClosed: function() {
                    $("#myPic").load('./renderer/renderPicture.php');
                    $('#myPic').css('display','inline');
                }
            });

it fills the DIV with strange symbols...

enter image description here

Here is a picture of the directory structure:

enter image description here

Why is the browser interpreting the picture differently on these two pages? What might cause the discrepancy?

rather than .load, try .html instead. .load is shorthand for an ajax request. — stefancarlton, Aug 23 '13 at 05:09
@stefancarlton, how will having a path to a file as html content help? — mishik, Aug 23 '13 at 05:12
ack, thanks @mishik. Plonker moment by me! You'd need to create a img element and put the SRC there instead. — stefancarlton, Aug 23 '13 at 05:15

score 2 · Accepted Answer · answered Aug 23 '13 at 05:09

You are getting symbols instead of an image since you are trying to send binary data without specifying what that data is.

Add header to your renderPicture.php file :

header('Content-Type: image/png');

And it will return the desired png image.

Cheers

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

The jQuery .load method will load TEXT/HTML content and insert it into the document. This is exactly what happens in your case, and is expected behavior.

To load an image via jQuery you can use:

$('<img src="./renderer/renderPicture.php">')

and then make use of the .load (event) to do something:

$('<img src="./renderer/renderPicture.php">').load(function() {
    $(this).appendTo('#myPic');
});

See here: https://stackoverflow.com/a/10863680/2327283

why does my LAMP stack show my image when I navigate to it w/ a URL but not when I load it w/jQuery and PHP

2 Answers2