Image not found before angular has updated document

Question

I have an angular JS application, which has a number of images, from an array.

My model looks something like this

$scope.images = [ {url: 'someimage.png', desc: 'some desc'}, {url: 'someimage.png', desc: 'some desc'} ] 

In my view, I iterate over this, to display all the images.

<ul>   <li ng-repeat="image in images" ><img src="{{image.url}}" /></li> </ul> 

This works, but I get some page errors, which say

404 Not Found - http://localhost/{{image.url}} 

The images are displaying correctly, so it is clearly the images are trying to be loaded before Angular has parsed to document get it ready. My scripts are also in the head, so it should not be a javascript ordering error.

Answer 1

The problem here was that I should be using ng-src and not src, so that it will only try to display the image when Angular is ready.

So, the correct code looks like

<ul>   <li ng-repeat="image in images" ><img ng-src="{{image.url}}" /></li> </ul>