Prefácio
No trabalho diário de desenvolvimento, existem muitos requisitos para exibir algumas fotos em uma página. Às vezes, o caminho do endereço da imagem é definido pelo script do cliente (pode ser recuperado do banco de dados).
Esta é a era dos angulares. Quando queremos usar o AngularJS para exibir imagens nas páginas, simplesmente usaremos: <img src=”path of image”>.
Se considerarmos apenas a apresentação, não há dúvida de que está tudo bem, mas um erro 404 (não encontrado) será exibido no console do navegador.
Para resolver esse problema, precisamos usar ng-Src . Antes de usar ng-Src , quero reproduzir como esse erro ocorre.
O código de amostra é o seguinte:
Amostra de código -fonte
Script.js
var testapp = angular .module ("testmodule", []) .Controller ("testController", função ($ scope) {var animal = {name: "gat", cor: "branco", imagem: "/images/cat.jpg",}; $ scope.animal = animal;});Index.html
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> <body> <DivnCntr {{animal.name}} <br /> cor: {{animal.color}} <br /> <img src = "{{animal.picture}}" /> </div> </body> < /html> No exemplo acima, há uma classe animal que possui três propriedades: Name , Color e Picture e recebeu valores atribuídos. Usando o fichário do modelo, usei essas propriedades na página. Para imagens, usei a tag <img> html.
Em seguida, execute este exemplo, o efeito é o seguinte:
Em seguida, abra o console do navegador e você verá esse erro.
Incapaz de carregar o recurso: o status da resposta do servidor é 404 (não encontrado).
Portanto, a questão é: por que esse erro ocorre? Como isso deve ser resolvido?
Causa - Quando o DOM é analisado, ele tentará obter a imagem do servidor. No momento, a expressão de ligação do AngularJS {{ model }} no atributo src ainda não foi executada, portanto, ocorreu um erro de 404 não encontrado.
Solução- A versão da solução é: Use ng-Src em vez src na figura. Após o uso dessa diretiva, a solicitação será emitida apenas após o angular executar essa expressão de ligação.
Exemplos de uso do NG-SRC são os seguintes:
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> <body> <DivnCntr {{animal.name}} <br /> cor: {{animal.color}} <br /> <img ng-src = "{{animal.picture}}" /> </div> < /body> </html> Agora que você abre o console do navegador novamente, não aparece: 404 não encontrado, isso ocorre porque ng-Src é usado.
definição
ng-Src- -Esta diretiva substitui src do elemento <img /> .
Resumir
O acima é o conteúdo inteiro deste artigo. Espero que gostem. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.