Verwendung von ng-src vs src

Dieses Tutorial demonstriert die Verwendung der Direktive ngSrcanstelle von src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

Sie fragen:

Ersetzen Sie die Anweisung ng-src durch ein einfaches altes src-Attribut.
Stellen Sie mithilfe von Tools wie Firebug oder Chrome's Web Inspector oder beim Überprüfen der Webserver-Zugriffsprotokolle sicher, dass die App tatsächlich eine externe Anforderung an /app/%7B%7Bphone.imageUrl%7D%7D (oder / app / {{phone) sendet .imageUrl}} ).

Ich tat es und es gab mir das richtige Ergebnis:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

Gibt es einen Grund warum?

<img ng-src="{{phone.imageUrl}}"> 

Dies gibt Ihnen das erwartete Ergebnis, da phone.imageUrles ausgewertet und durch seinen Wert ersetzt wird, nachdem der Winkel geladen wurde.

<img src="{{phone.imageUrl}}">

Damit versucht der Browser jedoch, ein Bild mit dem Namen zu laden {{phone.imageUrl}}, was zu einer fehlgeschlagenen Anforderung führt. Sie können dies in der Konsole Ihres Browsers überprüfen.

Aus Angular-Dokumenten

Die fehlerhafte Art, es zu schreiben:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

Die richtige Art, es zu schreiben:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Warum? Dies liegt daran, dass der Browser beim Laden der Seite vor dem eckigen Bootstrapping und der Erstellung von Controllern versucht, das Image von zu laden, http://www.gravatar.com/avatar/{{hash}}und dies schlägt fehl. Sobald der Winkel gestartet ist, versteht es, dass {{hash}}dies durch beispielsweise ersetzt werden logo.pngmuss. Jetzt ändert sich das src-Attribut http://www.gravatar.com/avatar/logo.pngund das Bild wird korrekt geladen. Das Problem ist, dass 2 Anfragen ausgeführt werden und die erste fehlschlägt.

Um dies zu lösen, sollten wir ng-srceine Winkelanweisung verwenden, und der Winkel ersetzt den ng-srcWert in das src-Attribut erst, nachdem das Winkel-Bootstrapping und die Controller vollständig geladen sind und zu diesem Zeitpunkt {{hash}}bereits durch den korrekten Bereichswert ersetzt worden wären.

Das src="{{phone.imageUrl}}"ist unnötig und erzeugt eine zusätzliche Anfrage durch den Browser. Der Browser stellt mindestens zwei GETAnfragen, um das Bild zu laden:

1. bevor der Ausdruck ausgewertet wird {{phone.imageUrl}}
2. nachdem der Ausdruck ausgewertet wird img/phones/motorola-xoom.0.jpg

Sie sollten ng-srcbeim Umgang mit Winkelausdrücken immer die Direktive verwenden. <img ng-src="{{phone.imageUrl}}">gibt Ihnen das erwartete Ergebnis einer einzelnen Anfrage.

Nebenbei bemerkt gilt das Gleiche für, ng-hrefdamit Sie keine unterbrochenen Links erhalten, bis der erste Digest-Zyklus einsetzt.

Nun, eigentlich macht es 100% Sinn, weil HTML sequentiell verarbeitet wird und wenn diese HTML-Seite Zeile für Zeile verarbeitet wird, bis sie zu diesem Bild, der Zeile und der Verarbeitung des Bildes gelangt, phone.imageUrlist unsere noch nicht definiert.

Tatsächlich hat Angular JS diesen HTML-Teil noch nicht verarbeitet und noch nicht nach diesen Platzhaltern gesucht und diese Ausdrücke durch die Werte ersetzt. Was am Ende passiert, ist, dass der Browser diese Zeile erhält und versucht, dieses Bild unter dieser URL abzurufen.

Und natürlich ist dies eine gefälschte URL, wenn sie noch diesen Schnurrbart und die geschweiften Klammern enthält, und daher erhalten Sie eine 404, aber sobald Angular sich darum kümmert, ersetzt sie diese URL durch die richtige und dann Wir sehen immer noch das Bild, aber die 404-Fehlermeldung bleibt in unserer Konsole.

Wie können wir uns darum kümmern? Nun, wir können uns nicht mit normalen HTML-Tricks darum kümmern. Aber wir können uns mit Angular darum kümmern. Wir müssen dem Browser irgendwie sagen, dass er nicht versuchen soll, diese URL abzurufen, sondern sie gleichzeitig nur abrufen soll, wenn Angular zur Interpretation dieser Platzhalter bereit ist.

Nun, eine Möglichkeit, dies zu tun, besteht darin, hier ein Angular-Attribut anstelle des Standard-HTML-Attributs zu setzen. Und das Angular-Attribut ist gerecht ng-src. Wenn wir das jetzt sagen, gehen Sie zurück, Sie werden sehen, dass es keine Fehler mehr gibt, da das Bild erst abgerufen wurde, als Angular diesen HTML-Code gefunden und alle Ausdrücke in ihre Werte übersetzt hat.