为什么当我使用URL导航到它时，我的LAMP堆栈会显示我的图像，而当我使用jQuery和PHP加载它时却不显示我的图像
[英]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. 
我在path/renderer/renderImage.php中有一个php文件，该文件可生成PNG图像并将其返回到浏览器。 When I navigate to that URL with my browser, it dumps the correct image on the screen. 当我使用浏览器导航到该URL时，它将在屏幕上转储正确的图像。 But when I try to load that image into a DIV with jQuery using the code below from path/index.html ... 但是当我尝试使用下面的path / index.html中的代码将图像加载到jQuery的DIV中时...
<!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... 它用奇怪的符号填充DIV ...
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 个解决方案
解决方案1
2 已采纳 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 : 将标题添加到您的renderPicture.php文件：
header('Content-Type: image/png');
And it will return the desired png image. 它将返回所需的png图像。
Cheers 干杯
解决方案2
1 2013-08-23 05:12:52
The jQuery .load method will load TEXT/HTML content and insert it into the document. jQuery .load方法将加载TEXT / HTML内容并将其插入文档中。 This is exactly what happens in your case, and is expected behavior. 这正是您遇到的情况，并且是预期的行为。
To load an image via jQuery you can use: 要通过jQuery加载图片，您可以使用：
$('<img src="./renderer/renderPicture.php">')
and then make use of the .load (event) to do something: 然后利用.load（事件）来做一些事情：
$('<img src="./renderer/renderPicture.php">').load(function() {
$(this).appendTo('#myPic');
});
See here: https://stackoverflow.com/a/10863680/2327283 看到这里： https : //stackoverflow.com/a/10863680/2327283
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.