Uso de ng-src vs src

Este tutorial demonstra o uso da diretiva em ngSrcvez de src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

Eles pedem para:

Substitua a diretiva ng-src por um atributo src simples e antigo.
Usando ferramentas como Firebug ou Chrome's Web Inspector, ou inspecionando os registros de acesso do servidor da web, confirme se o aplicativo está realmente fazendo uma solicitação estranha para /app/%7B%7Bphone.imageUrl%7D%7D (ou / app / {{telefone .imageUrl}} ).

Eu fiz isso e me deu o resultado correto:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

Existe uma razão para isso?

<img ng-src="{{phone.imageUrl}}"> 

Isso fornece o resultado esperado, porque phone.imageUrlé avaliado e substituído por seu valor após o carregamento de angular.

<img src="{{phone.imageUrl}}">

Mas com isso, o navegador tenta carregar uma imagem chamada {{phone.imageUrl}}, o que resulta em uma solicitação com falha. Você pode verificar isso no console do seu navegador.

Da Angular docs

A maneira complicada de escrever:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

A maneira correta de escrever:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Por quê? isso ocorre porque no carregamento da página, antes do bootstrap do angular e da criação dos controladores, o navegador tentará carregar a imagem http://www.gravatar.com/avatar/{{hash}}e falhará. Então, uma vez que angular é iniciado, ele entende que {{hash}}deve ser substituído por digamos logo.png, agora o atributo src muda para http://www.gravatar.com/avatar/logo.pnge a imagem carrega corretamente. O problema é que há 2 solicitações em andamento e a primeira falhando.

Para resolver isso, devemos usar ng-srcque é uma diretiva angular e angular substituirá o ng-srcvalor no atributo src somente após o bootstrap do angular e os controladores estarem totalmente carregados, e nesse momento {{hash}}já teria sido substituído pelo valor de escopo correto.

O src="{{phone.imageUrl}}"é desnecessário e cria uma solicitação extra pelo navegador. O navegador fará pelo menos 2 GETsolicitações tentando carregar essa imagem:

1. antes que a expressão seja avaliada {{phone.imageUrl}}
2. depois que a expressão é avaliada img/phones/motorola-xoom.0.jpg

Você sempre deve usar a ng-srcdiretiva ao lidar com expressões angulares. <img ng-src="{{phone.imageUrl}}">fornece o resultado esperado de uma única solicitação.

Em uma nota lateral , o mesmo se aplica para ng-hrefque você não obtenha links quebrados até que o primeiro ciclo de resumo seja iniciado.

Bem, na verdade faz 100% sentido porque o HTML é processado sequencialmente e quando esta página HTML está sendo processada linha por linha, no momento em que chega a essa imagem, a linha e o processamento da imagem, nosso phone.imageUrlainda não está definido.

E, de fato, o Angular JS ainda não processou esse pedaço de HTML e ainda não procurou por esses espaços reservados e substituiu essas expressões pelos valores. Então o que acaba acontecendo é que o navegador pega essa linha e tenta buscar essa imagem neste URL.

E, claro, este é um URL falso, se ainda tiver bigodes e chaves e, portanto, fornece um 404, mas uma vez que o Angular cuida disso, ele substitui esse URL pelo correto, e então ainda vemos a imagem, mas a mensagem de erro 404 permanece em nosso console.

Então, como podemos cuidar disso? Bem, não podemos cuidar disso usando truques regulares de HTML. Mas podemos cuidar disso usando o Angular. Precisamos de alguma forma dizer ao navegador para não tentar buscar esse URL, mas, ao mesmo tempo, buscá-lo apenas quando o Angular estiver pronto para a interpretação desses marcadores.

Bem, uma maneira de fazer isso é colocar um atributo Angular aqui em vez do HTML padrão. E o atributo Angular é justo ng-src. Então, se dissermos isso agora, volte, você verá que não há mais erros porque a imagem só foi buscada depois que o Angular conseguiu esse HTML e traduziu todas as expressões em seus valores.