Uso do ng-src vs src

Este tutorial demonstra o uso da diretiva ngSrc vez de src :

 

Eles pedem para:

Substitua a diretiva ng-src por um atributo src antigo.
Usando ferramentas como o Firebug ou o Web Inspector do Google Chrome ou inspecionando os registros de access ao servidor da Web, confirme se o aplicativo está de fato fazendo uma solicitação estranha para /app/%7B%7Bphone.imageUrl%7D%7D (ou / app / {{phone .imageUrl}} .

Eu fiz isso e me deu o resultado correto:

 
  • Existe uma razão pela qual?

      

    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.