Image Get Requests with AngularJS

Question

I am storing the the source string of an image to be rendered in HTML in the AngularJS controller, however it yields a 404 before the Angular controller is initialized.

Here is the HTML:

 <div ng-controller="Cont">
      <img src="{{imageSource}}">
 </div>

Angular controller:

 var Cont = function($scope) {
      $scope.imageSource = '/tests.png';
 }

And the error I get (%7D%7D corresponds to the {{ in the template).

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found)

How can I prevent this from happening? That is, only load the image when the Angular controller has been initialized?

Gloopy · Accepted Answer · 2012-10-16 20:00:09Z

230

Try replacing your src with ng-src for more info see the documentation:

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>

answered Oct 16, 2012 at 20:00

Gloopy

37.8k15 gold badges105 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juampy NR Over a year ago

It is better to use data-ng-controller and data-ng-src so that the HTML is valid.

Syed · Accepted Answer · 2016-01-26 10:48:53Z

6

If someone is searching the solution for styling background-image then use this:

<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>

answered Jan 26, 2016 at 10:48

Syed

16.6k15 gold badges128 silver badges159 bronze badges

1 Comment

Abdul Rauf Over a year ago

It is bad practice to use Interpolation with ngStyle. Reference: docs.angularjs.org/api/ng/directive/ngStyle

Collectives™ on Stack Overflow

Image Get Requests with AngularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related