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">

并且无法获取该网址指定的图片：

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

因为那里什么也没有。要解决此问题，请使用ng-src：

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

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

Answer 2

当您使用img src属性而不是ngSrc时，会发生此错误。你应该使用这种表示法：

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

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

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

（urlencoded {{CurrentPage.img}}）。显然会导致404错误。

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

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

2 个答案: