Impossibile caricare i file JPG locali nel mio progetto AngularJS

Question

Ho iniziato un piccolo progetto App AngularJS utilizzando il generatore-angolare di Yeoman.

Quando si aggiunge i file JPG alla cartella App / immagini e provare a utilizzare un tag che collega a uno di questi file JPG, non vengono visualizzati nel browser.

Quando si utilizzano i file PNG tutto ciò che è OK (usando lo stesso percorso assoluto /images/image.png e /images/image.jpg).Se utilizzo un URL remoto su un file JPG, tutto funziona bene.

Cosa mi manca qui?Ho lo stesso problema usando il tag.Quando si utilizza un percorso assoluto locale, non funziona e quando utilizzo un URL remoto tutto va bene.

Molte grazie per il tuo tempo e aiuto.

Answer 1

Stai usando HTML5Mode?Se è così e se si utilizza Connect-Modrewrite per riscrivere gli URL su Index.html, assicurati di aver escluso i file JPG e JPEG.Di recente ho riscontrato lo stesso problema e non ho capito che la mia regola di riscrittura è stata esclusa le immagini PNG ma non JPEG.

Answer 2

È necessario utilizzare un'espressione angolare {{}} per ng-src per lavorare.

Ad esempio, utilizzando questo markup HTML:

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

.

con un controller come:

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

.

consentirà ad angolare di caricare, eseguire la sua magia e quindi fare riferimento correttamente alla sorgente dell'immagine dalla variabile path detenuta in $scope dal controller.

Else, l'immagine Trys da caricare dall'attributo src non ha ancora avuto il tempo di ottenere un valore ancora.

Demo in un pinkeer: http://plnkr.co/edit/6jmdp96We0s7Dgygttxw?p=preview