Search code examples
javascriptangularjsangularjs-ng-repeat

Keep getting an error when using ng-repeat


I'm displaying results by using NG-repeat. There is an API call via $http.post that receives an array with information. In the results there is a 'Thumbnail' item.

part of the result is:

"Thumbnail":"https:\/\/<externalurl>.com\/_layouts\/15\/[email protected]

and its displayed by using (code snippet):

<tr ng-hide="group.$hideRows" ng-repeat="u in group.data" ng-repeat-end>
            <td class="td-info"><img src={{u.Thumbnail}}></td>
            <td class="td-info" title="'Name'">{{u.Name }}</td>

This all works and everything is displayed correct. The result string is ok and does not contain any empty results. However, when I see (only in developers mode) an error: 404 NOT FOUND

When I look at the error, it tries to load:

http://internalUrl.com/%7B%7Bu.Thumbnail%7D%7D

But on the webpage itself, there is no error...it seems that the first time it sees 'u.Thumbnail' the information is not yet loaded, or even more the angularjs {{u.Thumbnail}} is not understood for a moment...but I get no error on 'u.Name'....

To be precise, when I 'console.log' the returned data, I only have proper entries, no empty ones. So the return of the information is correct...

I hope it is clear what the 'problem' is. Again, for functionality it does not make any difference, but I want to understand and remove the error...

thank you!


Solution

  • In AngularJS you have to use ng-src instead of src attribute

    https://docs.angularjs.org/api/ng/directive/ngSrc