Impossible de charger les fichiers jpg locaux dans mon projet angulairejs

Question

J'ai démarré un petit projet d'application AngularJS en utilisant le générateur angulaire de Yeoman.

Lorsque vous ajoutez des fichiers jpg au dossier app/images et que vous essayez d'utiliser une balise reliant à l'un de ces fichiers jpg, ils n'apparaissent pas dans le navigateur.

Lorsque vous utilisez des fichiers png, tout va bien (en utilisant le même chemin absolu /images/image.png et /images/image.jpg).Si j'utilise une URL distante vers un fichier jpg, tout fonctionne correctement.

Qu'est-ce que j'oublie ici?J'ai le même problème en utilisant la balise.Lorsque j'utilise un chemin absolu local, cela ne fonctionne pas et lorsque j'utilise une URL distante, tout va bien.

Merci beaucoup pour votre temps et votre aide.

Answer 1

Utilisez-vous HTML5Mode?Si tel est le cas et si vous utilisez Connect-MODREWRITE pour réécrire les URL à index.html, assurez-vous d'avoir exclu des fichiers JPG et JPEG.J'ai récemment rencontré le même problème et je n'ai pas réalisé que ma règle de réécriture était excluant les images PNG mais pas JPEG.

Answer 2

Vous devez utiliser une expression angulaire {{}} pour ng-src travailler.

Par exemple, en utilisant ce balisage HTML :

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

avec un contrôleur comme :

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

permettra à angulaire de se charger, de faire sa magie, puis de référencer correctement la source de l'image à partir du path variable détenue dans $scope du contrôleur.

Sinon, l'image essaie de se charger à partir du src l'attribut n'a pas encore eu le temps d'obtenir une valeur.

Démo dans un plunker : http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview