Vorwort
In der täglichen Entwicklungsarbeit gibt es viele Anforderungen, um einige Bilder auf einer Seite anzuzeigen. Manchmal wird der Adressweg des Bildes durch das Skript des Clients festgelegt (es kann aus der Datenbank abgerufen werden).
Dies ist die Ära von AngularJs. Wenn wir AngularJs verwenden möchten, um Bilder auf Seiten anzuzeigen, werden wir einfach: <img src=”path of image”>.
Wenn wir nur die Präsentation betrachten, besteht kein Zweifel, dass es in Ordnung ist, aber ein 404 (nicht gefundener) Fehler wird in der Konsole des Browsers angezeigt.
Um dieses Problem zu lösen, müssen wir ng-Src verwenden. Bevor ich ng-Src verwendete, möchte ich reproduzieren, wie dieser Fehler auftritt.
Der Beispielcode lautet wie folgt:
Beispielquellcode
Script.js
var testapp = angular .module ("testModule", []) .controller ("testcontroller", function ($ scope) {var Animal = {Name: "Cat", Farbe: "Weiß", Bild: "/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 /> Farbe: {{Animal. Im obigen Beispiel gibt es eine animal mit drei Eigenschaften: Name , Color und Picture und die Werte wurden zugewiesen. Mit dem Modellbindemittel habe ich diese Eigenschaften auf der Seite verwendet. Für Bilder habe ich das <img> html -Tag verwendet.
Dann führen Sie dieses Beispiel aus, der Effekt lautet wie folgt:
Öffnen Sie dann die Konsole des Browsers und Sie werden diesen Fehler sehen.
Ressource kann nicht geladen werden: Der Serverantwortstatus ist 404 (nicht gefunden).
Die Frage ist also, warum dieser Fehler auftritt. Wie sollte es gelöst werden?
Ursache - Wenn das DOM analysiert wird, wird versucht, das Bild vom Server zu erhalten. Zu diesem Zeitpunkt wurde der AngularJS -Bindungsexpression {{ model }} im src -Attribut noch nicht ausgeführt, sodass ein Fehler von 404 nicht gefunden wurde.
Lösung- Die Lösungsversion lautet: Verwenden Sie ng-Src anstelle src Attributs im Bild. Nach der Verwendung dieser Richtlinie wird die Anfrage erst ausgestellt, nachdem Angular diesen Bindungsexpression ausgeführt hat.
Beispiele für die Verwendung von NG-SRC sind wie folgt:
<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 /> Farbe: {{Animal. Jetzt, da Sie die Konsole des Browsers wieder öffnen, wird es nicht angezeigt: 404 nicht gefunden, dies liegt daran, dass ng-Src verwendet wird.
Definition
ng-Src- -Diese Richtlinie überschreibt src -Attribute des <img /> -Element.
Zusammenfassen
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe es gefällt euch. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.