Impossibile caricare i file JPG locali nel mio progetto AngularJS
-
21-12-2019 - |
Domanda
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.
Soluzione
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.
Altri suggerimenti
È 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