What is the Angular way of dynamically loading a Data-URI scheme image?

Question

My server returns a base64-encoded image and I want to send it to the client on some event foo. The way I currently have it is as such:

index.html

...
<img src="{{data}}"></img>
...

controller.js

...
$scope.foo = function (result) {
     $scope.data = result;
}
....

When, foo happens, result is a base64 encoded image and the img element starts rendering, as expected. The problem is that when the page loads initially, a request to /{{data}} will fire to get the image and 404. How can I avoid having this rogue request fire when the page initially renders? What is the proper way of doing this, if not how I'm doing it?

Answer 1

To prevent the browser attempting to fetch the literal url /{{data}}, use the ng-src directive instead of src in your image tag.