为什么我的LAMP堆栈在我使用URL导航到它时显示我的图像但是当我用jQuery和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...
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?
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
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');
});