CODEWITHSUNDEEP
javascriptangularjs
Leo
Leo

Reputation: 1505

Error when injecting image src inside an ng-repeat

I am getting a JavaScript error when I inject the src into an image. 

<button ng-repeat="child in user.childArray" class="well"  ng-click="selectChild(child);"><img src="{{child.childImage}}"><br />{{child.childName}}</button>

I am putting the child.childImage as the src for an img element. When I do this I get the following error in my console.

GET http://localhost:8000/app/%7B%7Bchild.childImage%7D%7D 404 (Not Found) angular.js:2918

    forEach.html angular.js:2965 
    JQLite.(anonymous function) angular-route.js:901
    link  angular.js:8217 
    invokeLinkFn angular.js:7726 
    nodeLinkFn  angular.js:7075 
    compositeLinkFn  angular.js:6954 
    publicLinkFn  angular.js:7093 
    $get.boundTranscludeFn  angular.js:7753 
    controllersBoundTransclude  angular-route.js:865 
    update  angular.js:14707 
    $get.Scope.$broadcast  angular-route.js:547 
    (anonymous function)  angular.js:13175 
    processQueue  angular.js:13191 
    (anonymous function)  angular.js:14388 
    $get.Scope.$eval  angular.js:14204 
    $get.Scope.$digest  angular.js:14493 
    $get.Scope.$apply  angular.js:9650 
    done  angular.js:9840 
    completeRequest  angular.js:9781 
    requestLoaded

When I don't put it as the img src I don't get an error.

<button ng-repeat="child in user.childArray" class="well"  ng-click="selectChild(child);">{{child.childImage}}<br />{{child.childName}}</button>

Upvotes: 0

Views: 722

Answers (1)

Leo
Leo

Reputation: 1505

change src to ng-src

<button ng-repeat="child in user.childArray" class="well"  ng-click="selectChild(child);"><img ng-src="{{child.childImage}}"><br />{{child.childName}}</button>

Upvotes: 4

Related Questions