Immagine non trovata prima che angular abbia aggiornato il documento

Question

Ho un'applicazione angolare JS, che ha un numero di immagini, da una matrice.

Il mio modello simile a questa

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

A mio parere, ho iterare questo, per visualizzare tutte le immagini.

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

Questo funziona, ma ottengo alcuni errori di pagina, che dicono

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

Le immagini vengono visualizzate in modo corretto, quindi è chiaramente le immagini stanno cercando di essere caricato prima angolare ha analizzato per documentare ottenere è pronto. Anche i miei script sono in testa, quindi non dovrebbe essere un errore di ordinamento javascript.

Answer 1

Il problema qui era che dovrei usare ng-src e non src, in modo che proverà a visualizzare l'immagine solo quando Angular è pronto.

Quindi, il codice corretto sembra

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