What is an Angular way to dynamically load a data URI schema image?

Question

My server returns a base64 encoded image, and I want to send it to the client for some foo event. The way that I now have is this:

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, the request for /{{data}} lights up to get the image, and 404. How can I avoid this request for the exile when the page is initially displayed? What is the right way to do this, if not the way I do it?

Answer 1

To prevent the browser from trying to get a literal url /{{data}} , use ng-src instead of src in your image tag.