Понимание ошибки загрузки локального хоста в Angular JS

Ответ 1

Чтобы отключить вашу ошибку:

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

Ваш источник изображения закодирован в URL, где:

%7B%7B is {{

и

%7D%7D is }}

После загрузки страницы ваш браузер пытается получить изображение, указанное

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

но angular еще не успел оценить выражение. Затем 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.

Ответ 2

Эта ошибка возникает, если вы используете img с атрибутом src вместо ngSrc. Вы должны использовать это обозначение:

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

Проблема заключается в том, что при использовании синтаксиса src="{{CurrentPage.img}}" браузер начинает загрузку ресурса, создающего HTTP-запрос, до Angular разрешает привязку и заменяет {{CurrentPage.img}} фактическим путем:

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

(urlencoded {{CurrentPage.img}}). Очевидно, что это приведет к ошибке 404.

С другой стороны, атрибут ng-src не означает ничего для браузера, поэтому он ничего не сделает, пока Angular не будет готов и < Директива i1 > создает атрибут src с правильным URL.