CODEWITHSUNDEEP
phpjqueryhtmllamp
bernie2436
bernie2436

Reputation: 23921

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

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?

Upvotes: 0

Views: 119

Answers (2)

Community
Community

Reputation: 5082

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

Upvotes: 1

Roy M J
Roy M J

Reputation: 6948

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

Upvotes: 2

Related Questions