Préface
Dans le travail de développement quotidien, il existe de nombreuses exigences pour afficher certaines images sur une page. Parfois, le chemin d'adressage de l'image est défini par le script du client (il peut être récupéré dans la base de données).
C'est l'ère des angularjs. Lorsque nous voulons utiliser AngularJS pour afficher des images sur les pages, nous utiliserons simplement: <img src=”path of image”>.
Si nous ne considérons que la présentation, il ne fait aucun doute que c'est OK, mais une erreur 404 (non trouvée) sera affichée dans la console du navigateur.
Pour résoudre ce problème, nous devons utiliser ng-Src . Avant d'utiliser ng-Src , je veux reproduire comment cette erreur se produit.
L'exemple de code est le suivant:
Exemple de code source
Script.js
var testApp = Angular .Module ("TestModule", []) .Controller ("TestController", fonction ($ Scope) {var animal = {name: "Cat", Color: "White", image: "/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> <div ng-controller="testController"> Name: {{animal.name}} <br /> Couleur: {{animal.color}} <r /> <img src = "{{animal.picture}}" /> </div> </ body> </html> Dans l'exemple ci-dessus, il existe une classe animal qui a trois propriétés: Name , Color et Picture , et a reçu des valeurs. À l'aide du classeur du modèle, j'ai utilisé ces propriétés sur la page. Pour les images, j'ai utilisé la balise HTML <img> .
Ensuite, exécutez cet exemple, l'effet est le suivant:
Ouvrez ensuite la console du navigateur et vous verrez cette erreur.
Impossible de charger la ressource: l'état de la réponse du serveur est 404 (non trouvé).
La question est donc: pourquoi cette erreur se produit-elle? Comment devrait-il être résolu?
Cause - Lorsque le DOM est analysé, il essaiera d'obtenir l'image du serveur. À l'heure actuelle, l'expression de liaison AngularJS {{ model }} sur src n'a pas encore été exécutée, donc une erreur de 404 non trouvée s'est produite.
Solution - La version de la solution est: utilisez ng-Src au lieu de src dans l'image. Après avoir utilisé cette directive, la demande ne sera émise qu'après que Angular a exécuté cette expression de liaison.
Des exemples d'utilisation de NG-SRC sont les suivants:
<html ng-app="testModule"> <head> <title></title> <script src="scripts/angular.min.js"></script> <script src="scripts/js/script.js"></script> </head> <body> <div ng-controller="testController"> Name: {{animal.name}} <br /> Couleur: {{animal.color}} <r /> <img ng-src = "{{animal.picture}}" /> </div> </ body> </html> Maintenant que vous ouvrez à nouveau la console du navigateur, elle n'apparaîtra pas: 404 INTUST TROUVÉ, c'est parce que ng-Src est utilisé.
définition
ng-Src- -Ce directif remplace src de l'élément <img /> .
Résumer
Ce qui précède est l'intégralité du contenu de cet article. J'espère que vous l'aimez. Si vous avez des questions, vous pouvez laisser un message pour communiquer.