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

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

pI have a php file at codepath/renderer/renderImage.php/code 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 .../p precodelt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt;
lt;meta charset='utf-8'/gt; .... lt;script
src=https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jsgt;lt;/scriptgt;
lt;script src=../jquery.colorbox.jsgt;lt;/scriptgt; lt;scriptgt;
$.colorbox({width:30%, inline:true, href:#inline_content, onClosed:
function() { $(#myPic).load('./renderer/renderPicture.php');
$('#myPic').css('display','inline'); }, }); /code/pre pit fills the DIV
with strange symbols.../p pimg src=http://i.stack.imgur.com/xHL9H.png
alt=enter image description here/p pHere is a picture of the directory
structure: /p pimg src=http://i.stack.imgur.com/yIRe5.png alt=enter image
description here/p pWhy is the browser interpreting the picture
differently on these two pages? What might cause the discrepancy?/p