AngularJS. src="{{imageUrl}}" и ng-src="imageUrl"

В чем разница между объявлениями <img src="{{imageUrl}}" /> и <img ng-src="imageUrl" />? Почему первый вариант не стоит использовать?

На первый взгляд разницы никакой. В этом можно легко убедиться, запустив веб-приложение. Оба способа выведут требуемое изображение. Однако не будем торопиться и посмотрим на запросы, отправляемые браузером. В случае с <img src="{{imageUrl}}" /> среди них можно найти следующе:Invalid request

Браузер нашел тег изображения и попытался его предварительно загрузить по указанному пути. В этом случае сервер вернул страницу с произвольным сообщением об ошибке. Позже, когда AngularJS подставит  правильный путь вместо {{imageUrl}}, необходимое изображение будет загружено. С точки зрения пользователя все нормально. Однако сервер получил лишний запрос и передал (в данном случае) около 4 KB никому не нужных данных. А если изображение не одно, а десять?

Кстати, указания ng-cloak или display: none !important для изображения никак не мешают ненужной загрузке. Но это вполне логично с точки зрения механизма предварительной загрузки.Invalid request details

Для исправления ситуации достаточно заменить атрибут src на директиву ng-src="imageUrl":

<img ng-src="imageUrl" alt="..." />
Теперь изображения будут подгружаться только после указания ссылки на них.

Комментарии (2) -

Несколько недель назад сам столкнулся с этой проблемой. Только недавно решился начать применять angular.js в реальном проекте.

но скобки нужны в любом случае!
src="{{ imageUrl }}" и ng-src="{{ imageUrl }}"

Добавить комментарий