title: how to send png image from server to display in browser via ajax
body: <p>I have been having a hard time with what must be an incredibly normal task.  I upload and save images to my web server and save the path to the file in MySQL data base (this is all working).  The thing that doesn't work is fetching an image file from the server and displaying it on the page via ajax.  </p>
  
  <p>Originally I was trying to just retrieve the path from the database, and update an  tag's <code>src</code> attribute with the path to the image.  This was working, but this way all the images are in a folder on the server where people all have access to them.  This is not good.  I can only have the pictures that belong to certain users accessible by these users.  </p>
  
  <p>In order to restrict access to these photos I added an Apache directive on that folder, which successfully restricted access.  The problem then became that I could not display the images in the browser by setting the <code>src</code> attribute to that path.  See my post: <a href="https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site">https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site</a></p>
  
  <p>Finally I have learned that I have to use PHP to read the image data directly from the server and send this data to the browser. I have used the <a href="http://php.net/manual/en/function.file-get-contents.php" rel="nofollow noreferrer">file_get_contents()</a> function, which works to convert the image file (PNG) on the server into a string.  I return this string to the browser in an ajax call.  The thing I can't get is:  <strong>how to convert this string back into an image using JavaScript?</strong>  </p>
  
  <p>See this code:</p>
  
  <pre><code>$.ajax({
      url: get_image.php,
      success: function(image_string){
          //how to load this image string from file_get_contents to the browser??
      }
  });
  </code></pre>