了解Angular JS中的localhost映像加载错误

Question

如何找到以下错误报告的错误？

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}},它返回图像名称和工作,这是为什么错误在我的控制台？

Answer 1

要打破你的错误:

%7B%7BCurrentPage.img%7D%7D

您的图片来源是网址编码,其中:

%7B%7B is {{

和

%7D%7D is }}

页面加载后,您的浏览器会尝试获取指定的图像

<img src="{{CurrentPage.img}}">

但是角度还没有机会评估表达.然后broswer尝试获取原始文本指定的图像"{{CurrentPage.img}}"并对其进行编码,以便获得:

<img src="%7B%7BCurrentPage.img%7D%7D">

并且无法获取该URL指定的图像:

http://localhost:8080/%7B%7BCurrentPage.img%7D%7D

因为那里什么也没有.要解决这个问题,请使用ng-src:

<img ng-src="{{CurrentPage.img}}">

这可以防止浏览器在通过angular正确评估之前加载图像.

Answer 2

当您使用imgwithsrc属性而不是ngSrc. 你应该使用这个符号：

<img ng-src="CurrentPage.img" alt="" />

问题在于，当您使用src="{{CurrentPage.img}}"语法时，浏览器会在 Angular 解析绑定并替换{{CurrentPage.img}}为实际图像路径之前开始下载发出 HTTP 请求的资源：

http://localhost:8080/img/%7B%7BCurrentPage.img%7D%7D

（网址编码{{CurrentPage.img}}）。显然它会导致 404 错误。

另一方面，ng-src属性对浏览器没有任何意义，因此它不会做任何事情，直到 Angular 准备就绪并且ngSrc指令src使用正确的 URL创建属性。