Використання ng-src проти src

Цей підручник демонструє використання директиви ngSrcзамість src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

Вони просять:

Замініть директиву ng-src простим старим атрибутом src.
Використовуючи такі інструменти, як Firebug або веб-інспектор Chrome, або перевіряючи журнали доступу веб-сервера, переконайтеся, що програма дійсно робить сторонній запит до /app/%7B%7Bphone.imageUrl%7D%7D (або / app / {{phone .imageUrl}} ).

Я так зробив, і це дало мені правильний результат:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

Чи є причина чому?

<img ng-src="{{phone.imageUrl}}"> 

Це дає вам очікуваний результат, оскільки phone.imageUrlобчислюється і замінюється його значенням після завантаження angular.

<img src="{{phone.imageUrl}}">

Але за допомогою цього браузер намагається завантажити зображення з іменем {{phone.imageUrl}}, що призводить до невдалого запиту. Ви можете перевірити це на консолі вашого браузера.

З Angular docs

Баггі спосіб написати це:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

Правильний спосіб його написання:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Чому? це пов’язано з тим, що при завантаженні сторінки, перед кутовим завантаженням і створенням контролерів, браузер спробує завантажити зображення з, http://www.gravatar.com/avatar/{{hash}}і воно не вдасться. Потім після запуску angular він розуміє, що {{hash}}це потрібно замінити на say logo.png, тепер атрибут src змінюється http://www.gravatar.com/avatar/logo.pngі зображення правильно завантажується. Проблема полягає в тому, що відбувається 2 запити, і перший не вдається.

Щоб вирішити цю проблему, ми повинні використовувати ng-srcдирективу angular, і angular замінить ng-srcзначення на атрибут src лише після повного завантаження кутового завантаження та контролерів, і на той момент {{hash}}це вже було б замінено правильним значенням області.

Це src="{{phone.imageUrl}}"непотрібно і створює додатковий запит браузера. Браузер зробить щонайменше 2 GETзапити, намагаючись завантажити це зображення:

1. перед обчисленням виразу {{phone.imageUrl}}
2. після обчислення виразу img/phones/motorola-xoom.0.jpg

Ви завжди повинні використовувати ng-srcдирективу, маючи справу з виразами Angular. <img ng-src="{{phone.imageUrl}}">дає очікуваний результат одного запиту.

У примітці те саме стосується і того, ng-hrefщоб ви не отримували нерівних посилань, поки не розпочнеться перший цикл дайджесту.

Ну насправді це має 100% сенс, оскільки HTML обробляється послідовно, і коли ця HTML-сторінка обробляється рядок за рядком, до моменту, коли вона потрапляє до цього зображення, рядка та обробки зображення, наш phone.imageUrlще не визначений.

Насправді, Angular JS ще не обробив цей фрагмент HTML і ще не шукав ці заповнювачі та не замінював ці вирази значеннями. Отже, в кінцевому підсумку відбувається те, що браузер отримує цей рядок і намагається отримати це зображення за цією URL-адресою.

І звичайно, це фіктивна URL-адреса, якщо в ній ще є ці вуса та фігурні дужки, і тому вона дає вам 404, але, коли, звичайно, Angular подбає про це, вона замінює цю URL-адресу на відповідну, ми все ще бачимо зображення, але все ж повідомлення про помилку 404 залишається в нашій консолі.

Отже, як ми можемо про це подбати? Що ж, ми не можемо подбати про це, використовуючи звичайні трюки HTML. Але ми можемо подбати про це за допомогою Angular. Нам потрібно якось сказати браузеру, щоб він не намагався отримати цю URL-адресу, але в той же час отримати її лише тоді, коли Angular готовий до інтерпретації цих заповнювачів.

Ну, один із способів це зробити - поставити тут атрибут Angular замість стандартного HTML. І атрибут Angular справедливий ng-src. Отже, якщо ми скажемо це зараз, поверніться назад, ви побачите, що помилок більше немає, оскільки зображення було отримано лише після того, як Angular отримав цей HTML і перевів усі вирази у свої значення.