Lokale JPG-Dateien können in mein Angularjs-Projekt nicht geladen werden

Question

Ich habe ein kleines Angularjs-App-Projekt mit yeomans Generator-Angular gestartet.

Wenn Sie JPG-Dateien zum Ordner app / images hinzufügen und versuchen, ein Tag zu verwenden, das mit einer dieser JPG-Dateien verknüpft ist, werden diese nicht im Browser angezeigt.

Bei Verwendung von PNG-Dateien ist alles in Ordnung (Unter Verwendung des gleichen absoluten Pfads / images / image.png und /images/image.jpg).Wenn ich eine Remote-URL zu einer JPG-Datei verwende, funktioniert alles einwandfrei.

Was vermisse ich hier?Ich habe das gleiche Problem mit dem Tag.Wenn Sie einen lokalen absoluten Pfad verwenden, funktioniert dies nicht und wenn ich eine Remote-URL verwende, ist alles in Ordnung.

Vielen Dank für Ihre Zeit und Hilfe.

Answer 1

Verwenden Sie HTML5MODE?Wenn ja, und wenn Sie Connect-ModreWrite verwenden, um URLs auf Index.html neu zu schreiben, stellen Sie sicher, dass Sie JPG- und JPEG-Dateien ausgeschlossen haben.Ich habe kürzlich auf das gleiche Problem gestoßen und erkennen nicht, dass meine Umschreibungsregel PNG-Bilder ausnahm, aber nicht JPEG.

Answer 2

Sie müssen einen eckigen Ausdruck verwenden {{}} für ng-src arbeiten.

Verwenden Sie beispielsweise dieses HTML-Markup:

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

mit einem Controller wie:

function MyCtrl($scope) {
    $scope.path = 'https://si0.twimg.com/profile_images/';
};

ermöglicht Angular das Laden, macht seine Magie und verweist dann korrekt auf die Bildquelle aus dem path variable gehalten in $scope vom Controller.

Andernfalls versucht das Bild aus dem zu laden src attribut hatte noch keine Zeit, einen Wert zu erhalten.

Demo in einem Plunker: http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview