title: AngularJS: Binary Image not loading
body: <p>I am trying to use <code>ng-src</code> to load binary image data, however all I am getting in the console is: <code>GET http://localhost:3000/%7B%7D 404 (Not Found)</code> in the console with a broken image in the front end.</p>
  
  <p>I am using the following code to load the image: <code>&lt;img ng-src="{{ event.snapshot }}" /&gt;</code></p>
  
  <p><code>event.snapshot</code> is lazy loaded with the following code:</p>
  
  <pre><code>$scope.downloadImage = function(imgReady, index) {
      if (imgReady == false) {
  
  
          for (var i = $scope.vehicles[index].events.length - 1; i &gt;= 0; i--) {
              var config = {
                  method: 'POST',
                  url: '/Events/SnapShot',
                  data: $scope.vehicles[index].events[i],
                  cache: false
              }
  
              RequestService.makeApiRequest(config).success(function(j) {
                  return function(response) {
                      console.log(response.data);
                      $scope.vehicles[index].events[j].snapshot = response.data;
                  }
              }(i));
  
              console.log($scope.vehicles[index].events[i]);
          };
      }
  }
  </code></pre>
  
  <p>When the user pops open an event tab, I am loading the image in. The <code>console.log</code> is showing the data as loaded, and it comes in the following style:</p>
  
  <p><code>/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADGAoADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAA...</code></p>
  
  <p>I've cut the data short as it is much longer than this, do I need to perform additional massaging to the data? I am confused as to why it is not loading correctly.</p>