CODEWITHSUNDEEP
javascriptangularjs
user139014
user139014

Reputation: 1495

angular not loading quickly enough to prevent ng-repeat error

I have a pretty vanilla ng-repeat statement in my template that is meant to repeat a set of images in table:

<tr ng-repeat="d in data">
     <td><img src={{d.image}}></img></td>
</tr>

All the images load properly (they all exist and they all show up in the table) but I see the following error in the console when I'm testing locally (and also when I deploy):

Failed to load resource: the server responded with a status of 404 (File not found) http://localhost:8000/%7B%7Bd.image%7D%7D

I think what's happening here is that the error is being thrown before Angular has loaded — which makes sense, since without Angular, looking for {{d.image}} should throw an error — and then once Angular loads, the images load correctly.

How do I get the browser to not try and render {{d.image}} until Angular is loaded? I put ng-cloak into the <body> tag but that doesn't seem to be helping. Am I even thinking about this the correct way?

Upvotes: 1

Views: 636

Answers (1)

ryeballar
ryeballar

Reputation: 30098

This problem tends to happen when you're using the src attribute to interpolate the path of your images. Use ng-src instead of using the src attribute.

<tr ng-repeat="d in data">
     <td><img ng-src="{{d.image}}"></td>
</tr>

Upvotes: 7

Related Questions