Prefacio
En el trabajo de desarrollo diario, hay muchos requisitos para mostrar algunas imágenes en una página. A veces, la ruta de dirección de la imagen se establece mediante el script del cliente (se puede recuperar de la base de datos).
Esta es la era de Angularjs. Cuando queremos usar AngularJS para mostrar imágenes en las páginas, simplemente usaremos: <img src=”path of image”>.
Si solo consideramos la presentación, no hay duda de que está bien, pero se mostrará un error 404 (no encontrado) en la consola del navegador.
Para resolver este problema, necesitamos usar ng-Src . Antes de usar ng-Src , quiero reproducir cómo ocurre este error.
El código de muestra es el siguiente:
Muestra de código fuente
Script.js
var testApp = angular .module ("testModule", []) .controller ("testController", function ($ scope) {var animal = {name: "gat", color: "blanco", imagen: "/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> <briv ng-concroller = "testController" Color: {{animal.color}} <Br/> <img src = "{{animal.picture}}"/> </div> </body> </html> En el ejemplo anterior, hay una clase animal que tiene tres propiedades: Name , Color e Picture , y se les ha asignado valores. Usando la carpeta del modelo, utilicé estas propiedades en la página. Para las imágenes, utilicé la etiqueta <img> html.
Luego ejecute este ejemplo, el efecto es el siguiente:
Luego abra la consola del navegador y verá este error.
No se puede cargar recursos: el estado de respuesta del servidor es 404 (no encontrado).
Entonces, la pregunta es, ¿por qué ocurre este error? ¿Cómo debe resolverse?
Causa: cuando se analiza el DOM, intentará obtener la imagen del servidor. En este momento, la expresión de enlace AngularJS {{ model }} en src aún no se ha ejecutado, por lo que se produjo un error de 404 no encontrado.
Solución: la versión de solución es: use ng-Src en lugar src en la imagen. Después de usar esta directiva, la solicitud solo se emitirá después de que Angular ejecute esta expresión de unión.
Los ejemplos de uso de NG-SRC son los siguientes:
<html ng-app = "testModule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js"> </script> </head> <body> <briv ng-concroller = "testController" Color: {{animal.color}} <Br/> <img ng-src = "{{animal.picture}}"/> </div> </body> </html> Ahora que vuelve a abrir la consola del navegador, no aparecerá: 404 no encontrado, esto se debe a que se usa ng-Src .
definición
ng-Src- -Esta directiva anula src del elemento <img /> .
Resumir
Lo anterior es todo el contenido de este artículo. Espero que te guste. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.