了解Angular JS中的本地主机图像加载错误

一尘不染

了解Angular JS中的本地主机图像加载错误

angularjs

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

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

阅读 208

2020-07-04

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

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

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

因为那里什么都不存在。为了解决这个问题，请使用ng-
src：

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

这样可以防止浏览器在通过角度正确评估之前加载图像。

2020-07-04