理解角度JS本地主机的图像加载错误 [英] Understanding a localhost Image loading error in Angular JS
问题描述
我如何才能找到以下错误报告的错误?
How can I find the error of the following error report?
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
是 {{} CurrentPage.img}
,返回图像名称和工作,这是为什么错误在我的控制台?
The %7B%7BCurrentPage.img%7D%7D
is a {{CurrentPage.img}}
, which returns the image name and is working, why is this error in my console?
推荐答案
要打破你的错误了下来:
To break your error down:
%7B%7BCurrentPage.img%7D%7D
您的图像源的URL连接codeD,其中:
Your image source is url encoded, where:
%7B%7B is {{
和
%7D%7D is }}
在页面加载浏览器尝试获取图像通过
Once the page loads your browser tries to get the image specified by
<img src="{{CurrentPage.img}}">
但角度已经没有机会尚未评估前pression。该broswer然后试图通过获得的原始文本{{CurrentPage.img}}
和连接$指定的图像C $ CS,所以你得到:
but angular hasn't had a chance yet to evaluate the expression. The broswer then tries get the image specified by the raw text "{{CurrentPage.img}}"
and encodes it so you get:
<img src="%7B%7BCurrentPage.img%7D%7D">
和无法获得通过该URL指定的图像:
And are unable to get an image specified by that url:
http://localhost:8080/%7B%7BCurrentPage.img%7D%7D
由于什么都不存在那里。为了解决这个问题使用 NG-SRC :
Because nothing exists there. To get around this use ng-src:
<img ng-src="{{CurrentPage.img}}">
这$ P $从它的角度适当评估之前加载图像pvents浏览器。
That prevents the browser from loading the image before its properly evaluated by angular.
这篇关于理解角度JS本地主机的图像加载错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!