AngularJS aktualisiert img src nicht, wenn sich das Modell ändert

Ich verwende , um Bilder zu laden. Der Wert wird von einem gewissen Umfang Variable geladen, wie folgt aus:AngularJS aktualisiert img src nicht, wenn sich das Modell ändert

<img ng-src="{{currentReceipt.image}}"/>

Mein Problem ist, dass, wenn ich delete $scope.currentReceipt laufen, macht es ng-src leer Attribut gibt aber nicht in src Attribut. Daher sehe ich immer wieder das Bild, wo ich einen leeren Platzhalter brauche.

Wie kann ich damit umgehen?

Quelle

2013-07-05 Sergei Basharov

es Legen Sie in einem plunkr –

Mögliche Duplikat [leer ng-src nicht aktualisiert image] (http://stackoverflow.com/questions/22092687/empty-ng-src-doesnt-update-image) –

Dies ist das erwartete Verhalten der ngSrc- und ngHref-Anweisungen. Diese Direktiven unterstützen nur die Erkennung neuer Pfade, aber wenn der Pfad nicht verfügbar ist, werden die Direktiven exit silently (ich sehe hier eine Pull-Anfrage).

So eine mögliche Abhilfe könnte ngShow verwenden zusammen mit dem ngHref den Tag ganz ausblenden, wenn Bildvariable ist nicht mehr vorhanden.

<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />

Quelle

2013-07-05 16:59:22 Stewie

+1 für die Verwendung von 'ng-show', möchten Sie vielleicht auch in Betracht ziehen, das Bild aus dem DOM zu entfernen mit 'ng-switch' wenn Sie es komplett entfernen möchten. – Terry

Danke, es scheint, als müsste ich es umgehen, so wie du es vorschlägst. Ich habe einen Blick in Angular-Code geworfen, der die ng-src-Direktive verwaltet und bemerkt, dass es auch beendet wird, wenn kein Wert angegeben wird, kein existierender src-Wert oder ähnliches entfernt wird. Ich habe mich entschieden, Fälle wie diese mit der ng-Klasse zu behandeln. Vielen Dank! –

Ich vermute, dass die Autoren absichtlich die Anweisung gemacht haben, einfach zu beenden, wenn der Wert nicht definiert ist, weil das Entfernen/Löschen des src-Attributs dazu führt, dass der Browser die zerbrochene Bildminiatur anzeigt, was nicht wirklich erwünscht ist. – Stewie

Aufruf $ scope $() nach löschen $ Umfang anzuwenden. AktuelleReceipt.

Quelle

2014-09-02 11:01:28

Die folgende Lösung funktioniert für mich:

<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />

Quelle

2015-06-29 23:15:36 Mingyu

Sie können tatsächlich für Länge überprüfen und tun

<img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">

Quelle

2016-04-13 16:56:49 Mike

AngularJS aktualisiert img src nicht, wenn sich das Modell ändert

Antwort

Verwandte Themen