Animierte GIFs spielen nicht in Firefox, wenn über AngularJS geladen

Question

Ich bin ein Anfänger mit Angular 1. Ich habe eine Funktion in meinem Controller, die URLs zu verschiedenen animierten GIF-Dateien abhängig von einigen Parametern in einem HTML-Formular generiert. Ich habe dann ein img Tag, dass die GIF-Datei zeigen soll, wie folgt aus:

<img alt="preview" src="{{ctrl.previewURL()}}"/> 

Grundsätzlich funktioniert es. Wenn ich die Werte in meinen Eingabefeldern ändere, wird das Bild entsprechend aktualisiert. Nachdem das dritte Bild auf diese Weise geladen wurde, hören die GIFs jedoch auf, ihre Animationen abzuspielen (obwohl die richtigen Dateien noch geladen werden) und zeigen nur ein Bild an. Dies geschieht unabhängig von der Reihenfolge, in der ich versuche, sie zu laden. Es ist also kein Problem mit den Dateien selbst.

Interessanterweise scheint dieses Problem nur in Firefox zu erscheinen (ich verwende Version 48). In Microsoft Edge funktioniert alles einwandfrei. Ich hatte noch keine Gelegenheit andere Browser zu testen.

Gibt es eine Möglichkeit, dies auch in Firefox zum Laufen zu bringen? Oder gibt es eine bessere Übung, um so etwas mit Angular zu machen?

Answer 1

Statt src Verwendung ng-src

Der Browser des src als „{{ctrl.previewURL()}}“ auf den ersten sehen, bis Winkel Beginn der Arbeit so ng-src verwenden und das Bild wird mit Winkel geladen werden nur .

Code:

<img alt="preview" ng-src="{{ctrl.previewURL()}}"/>