Uso do ng-src vs src

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

Mas com isso, o navegador tenta carregar uma imagem chamada https://stackoverflow.com/questions/27554765/use-of-ng-src-vs-src/{{phone.imageUrl}} , o que resulta em uma solicitação com falha. Você pode verificar isso no console do seu navegador.

De documentos angulares

A maneira buggy de escrevê-lo:

A maneira correta de escrevê-lo:

Por quê? Isso ocorre porque no carregamento da página, antes do bootstrapping angular e da criação de controladores, o navegador tentará carregar a imagem de http://www.gravatar.com/avatar/{{hash}} e ela falhará. Então, quando o ângulo é iniciado, ele entende que {{hash}} deve ser substituído por say logo.png , agora o atributo src muda para http://www.gravatar.com/avatar/logo.png e a imagem é carregada corretamente. O problema é que há 2 solicitações em andamento e a primeira falha.

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

O src="http://sofpt.miximages.com/angularjs/{{phone.imageUrl}}" é desnecessário e cria uma solicitação extra pelo navegador. O navegador fará pelo menos 2 solicitações GET tentando carregar a imagem:

1. antes que a expressão seja avaliada https://stackoverflow.com/questions/27554765/use-of-ng-src-vs-src/{{phone.imageUrl}}
2. após a expressão ser avaliada img/phones/motorola-xoom.0.jpg

Você deve sempre usar ng-src diretiva ng-src ao lidar com expressões angulares. fornece o resultado esperado de uma única solicitação.

Em uma nota lateral , o mesmo se aplica a ng-href para que você não obtenha links quebrados até o primeiro ciclo de digitação entrar em ação.

Bem, na verdade, faz 100% de sentido porque o HTML é processado sequencialmente e quando esta página HTML está sendo processada linha por linha, quando chega a esta imagem, a linha e processa a imagem, nosso phone.imageUrl ainda 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 obtém essa linha e tenta buscar essa imagem nesse URL.

E, claro, essa é uma URL falsa, se ainda tiver esses bigodes e chaves nela, e, portanto, ela fornece 404, mas, uma vez que Angular cuida disso, ela substitui essa URL pela própria e, em seguida, Ainda vemos a imagem, mas a mensagem de erro 404 permanece no nosso console.

Então, como podemos cuidar disso? Bem, nós não podemos cuidar disso usando truques HTML regulares. Mas podemos cuidar disso usando o Angular. Precisamos, de alguma forma, dizer ao navegador para não tentar buscar essa URL, mas, ao mesmo tempo, buscá-la apenas quando o Angular estiver pronto para interpretá-la.

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