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...
Here is a picture of the directory structure:
Why is the browser interpreting the picture differently on these two pages? What might cause the discrepancy?
2 answers
solution1
2 ACCPTED 2013-08-23 05:09:24
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
solution2
1 2013-08-23 05:12:52
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');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.