angularjs - 了解 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

您的图像源是 url 编码的，其中:

%7B%7B is {{

和

%7D%7D is }}

页面加载后，您的浏览器会尝试获取

指定的图像

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

但是 Angular 还没有机会计算表达式。然后，浏览器尝试获取由原始文本 "{{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 正确评估图像之前加载图像。