Comprendre l'erreur de chargement D'une Image localhost en JS angulaire
Comment puis-je trouver l'erreur de l'erreur suivante rapport?
GET http://localhost:8080/img/%7B%7BCurrentPage.img%7D%7D 404 (Not Found) angular.js:2763
r.html angular.js:2763
S.(anonymous function) angular.js:2810
(anonymous function) angular-ui-router.min.js:7
N angular.js:6711
g angular.js:6105
(anonymous function) angular.js:6001
j angular-ui-router.min.js:7
(anonymous function) angular-ui-router.min.js:7
k.$broadcast angular.js:12981
u.transition.L.then.u.transition.u.transition angular-ui-router.min.js:7
F angular.js:11573
(anonymous function) angular.js:11659
k.$eval angular.js:12702
k.$digest angular.js:12514
k.$apply angular.js:12806
h angular.js:8379
u angular.js:8593
z.onreadystatechange angular.js:8532
%7B%7BCurrentPage.img%7D%7D est un {{CurrentPage.img}}, qui renvoie le nom de l'image et qui fonctionne, pourquoi cette erreur est-elle dans ma console?
2 réponses
pour décomposer votre erreur:
%7B%7BCurrentPage.img%7D%7D
Votre source de l'image est encodée url:
%7B%7B is {{
et
%7D%7D is }}
une fois la page chargée, votre navigateur essaie d'obtenir l'image spécifiée par
<img src="{{CurrentPage.img}}">
mais angular n'a pas encore eu la chance d'évaluer l'expression. Le navigateur tente alors d'obtenir l'image spécifiée par le texte brut "{{CurrentPage.img}}" et le code de sorte que vous obtenez:
<img src="%7B%7BCurrentPage.img%7D%7D">
Et sont incapables d'obtenir une image précise url:
http://localhost:8080/%7B%7BCurrentPage.img%7D%7D
parce qu'il n'y a rien là-bas. Pour contourner cette utilisation ng-src:
<img ng-src="{{CurrentPage.img}}">
qui empêche le navigateur de charger l'image avant qu'elle ne soit correctement évaluée par angle.
Cette erreur se produit lorsque vous utilisez imgsrc l'attribut au lieu de ngSrc. Vous devez utiliser cette notation:
<img ng-src="CurrentPage.img" alt="" />
Le problème est que lorsque vous utilisez src="{{CurrentPage.img}}" syntaxe, le navigateur commence à télécharger une ressource en faisant une requête HTTP avant que Angular ne résolve la liaison et remplace {{CurrentPage.img}} avec un réel chemin de l'image:
http://localhost:8080/img/%7B%7BCurrentPage.img%7D%7D
(urlencoded {{CurrentPage.img}}). Évidemment, il en résultera une erreur 404.
d'autre part,, ng-src l'attribut ne signifie rien pour le navigateur afin de ne pas faire n'importe quoi, jusqu'à ce Angulaire est prêt et ngSrc la directive crée src attribut avec L'URL appropriée.