title: Retrieve image from database using Web API, then displaying it in angularJS
body: <p>Seems like a straightforward issue, but how can you retrieve an image stored in a database, using Web API, then display it using Angular?</p>
  
  <p>Here is an example Web API service which is correctly returning a JPG file (using <code>HttpResponseMessage</code>):</p>
  
  <pre><code>    public HttpResponseMessage GetIncidentImages(Guid IncidentIDX) {
          var response = new HttpResponseMessage();
  
          List&lt;T_EM_INCIDENT_ATTACH&gt; att = db_Layer.GetT_EM_INCIDENT_ATTACH_byIncidentIDX(IncidentIDX);
          if (att != null)
          {
              if (att.Count &gt; 0)
              {
                  var pictureBytes = att[0].ATTACH_CONTENT;  //ATTACH_CONTENT is a byte array
  
                  if (pictureBytes == null)
                      response.StatusCode = HttpStatusCode.NotFound;
                  else
                  {
                      response.Content = new ByteArrayContent(pictureBytes);
                      response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
                  }
              }
              else
                  response.StatusCode = HttpStatusCode.NotFound;
          }
  
          return response;
      }
  </code></pre>
  
  <p>Then on the http client-side, I am using angular to retrieve the data. Data is definitely getting retrieved, but just not displayed.</p>
  
  <pre><code>    dbManagerService.syncIncidentAttach(ehConstants.incidenT_IDX).then(function (res) {
          console.log("return", res);
  
          $scope.cameraPic = res;
      });
  
  function _syncIncidentAttach(incIDX) {
      var deferred = $q.defer();
  
      $http.get($rootScope.serverBaseUrl + 'api/incident/GetIncidentImages?IncidentIDX=' + incIDX, { responseType: "blob" })
      .success(function (res, status, headers, config) {
          // encode data to base 64 url
          fr = new FileReader();
          fr.onload = function () {
              // this variable holds your base64 image data URI (string)
              // use readAsBinary() or readAsBinaryString() below to obtain other data types
              console.log(fr.result);
          };
          fr.readAsDataURL(res);
  
          deferred.resolve(fr);
      })
      .error(function(data, status, headers, config) {
          conole.log('error getting image');
      });
  
      return deferred.promise;
  }
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code> &lt;img ng-src="{{cameraPic}}" /&gt; &lt;/div&gt;
  </code></pre>