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?
