title: Retrieve Images From Server via Client Side
body: <p>I have a folder on the server with some images in it.  I would like to have my client code read this folder's contents (images) and then display this image on a div.  I thought this would be easy with AJAX, but it seems that AJAX returns some raw data embedded in the image.  I have been looking all over for a way to get the image's url instead of this data, but everything I have tried just does not work. I really prefer to do this on the client side.  I appreciate any suggestions you can give me on going about this :).</p>
  
  <p>Thanks,</p>
  
  <p>elshae</p>
  
  <pre><code>//Here is some of my code...
  
  var info = new OpenLayers.Control.WMSGetFeatureInfo({
                          url: 'http://localhost:8080/geoserver/wms',
                          title: 'Identify features by clicking',
                          queryVisible: true,
                          eventListeners: {
                              getfeatureinfo: function(event){              
                                 map.addPopup( new OpenLayers.Popup.AnchoredBubble(
                                      "chicken",
                                      map.getLonLatFromPixel(event.xy),
                                      null,
                                      event.text + '&lt;div&gt; Hello Tibet :)&lt;/div&gt;' + load('./Photos/potalaPalace.jpg'), 
                                      null,
                                      true
  
                                  ));
  
                              }
  
                           }
                      });
                      map.addControl(info);
                      info.activate();
  
          });
  
  
          function ahah(url) {
                //document.getElementById(target).innerHTML = ' Fetching data...';
                if (window.XMLHttpRequest) {
                  req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                  req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                if (req != undefined) {
                  req.onreadystatechange = function() {ahahDone(url);};
                  req.open("GET", url, true);
                  req.send("");
                }
              }  
  
              function ahahDone(url) {
                if (req.readyState == 4) { // only if req is "loaded"
                  if (req.status == 200) { // only if "OK"
                    //'&lt;div&gt;&lt;img src="' + req.response + '"&gt;&lt;/div&gt;';
                      var img = new Image();
                      img.src = req.url;
                      '&lt;div&gt;&lt;img src="' + img + '"/&gt;&lt;/div&gt;';
                  } else {
                    " &lt;div&gt; AHAH Error:\n"+ req.status + "\n" +req.statusText + "&lt;/div&gt;";
                  }
                }
              }
  
              function load(name) {
                  ahah(name);
                  return false;} 
  </code></pre>