angularjs - using {{}} binding inside ng-src but ng-src doesn't load

Question

I have been trying to bind a value to the ng-src of an img HTML element to no avail.

HTML code:

<div ng-controller='footerCtrl'>
<a href="#"><img ng-src="{{avatar_url}}"/></a>
</div>

AngularJS code:

app.controller('footerCtrl',function($scope, userServices)
{
$scope.avatar_url='';
$scope.$on('updateAvatar', function()
{$scope.avatar_url = userServices.getAvatar_url();}
);
}

app.factory('userServices', function($rootScope){ 
var avatar_url='';
return{  setAvatar_url: function(newAvatar_url)
{ avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}}
);

I would like to update the avatar_url variable in the ng-src every-time its respective variable(avatar_url) in the user Service is updated. The variable in the user Service is updated through a http.POST request to the server. I have checked that the response from the server does update the variable in the user Service which is then broadcast to the avatar_url variable in the footerCtrl.

However, the image element HTML does not reflect the changes at all. In fact, I have also tried to preset the avatar_url variable to a relative path to one of the pictures in my page, the image still shows nothing(the ng-src value is empty). T

In the userServices you have a setAvatar_url function vs. in the controller you use the getAvatar_url function. Could that be the issue? — Moritz Petersen
– Moritz Petersen, Commented May 6, 2013 at 9:39
Hi, sorry for the delay in replying, maybe the fiddle jsfiddle.net/jiaming/DvNA9/1 would be clearer in explaining the code. Thank you for your time. — jiaming
– jiaming, Commented May 6, 2013 at 13:17
I was looking ng-src attribute for usage, and question already gave me the answer thanks! :) — Teoman shipahi
– Teoman shipahi, Commented Feb 11, 2014 at 6:10

Moritz Petersen · Accepted Answer · 2013-05-06 14:55:54Z

91

Changing the ng-src value is actually very simple. Like this:

<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<img ng-src="{{img_url}}">
<button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">Click</button>
</body>
</html>

Here is a jsFiddle of a working example: http://jsfiddle.net/Hx7B9/2/

answered May 6, 2013 at 14:55

Moritz Petersen

13.1k3 gold badges42 silver badges46 bronze badges

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

4 Comments

jiaming Over a year ago

Thanks. this was what I was really trying to do: jsfiddle.net/jiaming/DvNA9/12 . But the main problem was that I was rendering it as a jinja template in the app engine server which caused conflicts with all the {{}} braces.

Moritz Petersen Over a year ago

Oh, that you mean. You can change the {{}} if you like: jsfiddle.net/THjQe/1

jiaming Over a year ago

wow, thanks for that reply, I didn't know you can do that. (:

AlicanC Over a year ago

You might want to be sure that you are not breaking any plugins before you change Angular's {{}}. There are some that relies on {{}}.

Envy · Accepted Answer · 2016-06-09 03:24:50Z

8

We can use ng-src but when ng-src's value became null, '' or undefined, ng-src will not work. So just use ng-if for this case:

http://jsfiddle.net/Hx7B9/299/

<div ng-app>
    <div ng-controller="AppCtrl"> 
        <a href='#'><img ng-src="{{link}}" ng-if="!!link"/></a>
        <button ng-click="changeLink()">Change Image</button>
    </div>
</div>

edited Jun 9, 2016 at 3:24

answered Jun 8, 2016 at 7:38

Envy

5406 silver badges20 bronze badges

1 Comment

Richard K. Campion Over a year ago

Thank you. This is a bug. Had me confused. ng-src was displaying a previous image.

Collectives™ on Stack Overflow

angularjs - using {{}} binding inside ng-src but ng-src doesn't load

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related