Użycie ng-src vs src

Ten samouczek demonstruje użycie dyrektywy ngSrczamiast src:

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

Proszą o:

Zastąp dyrektywę ng-src zwykłym starym atrybutem src.
Korzystając z narzędzi takich jak Firebug lub Chrome's Web Inspector lub sprawdzając dzienniki dostępu do serwera internetowego, potwierdź, że aplikacja rzeczywiście wysyła nieistotne żądanie do /app/%7B%7Bphone.imageUrl%7D%7D (lub / app / {{phone .imageUrl}} ).

Zrobiłem to i dało mi to poprawny wynik:

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

Czy jest powód dlaczego?

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

Daje to oczekiwany wynik, ponieważ phone.imageUrljest oceniany i zastępowany przez swoją wartość po załadowaniu kątownika.

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

Ale w ten sposób przeglądarka próbuje załadować obraz o nazwie {{phone.imageUrl}}, co skutkuje nieudanym żądaniem. Możesz to sprawdzić w konsoli swojej przeglądarki.

Z dokumentów Angular

Buggy sposób, aby to napisać:

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

Jak to napisać:

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

Czemu? dzieje się tak dlatego, że przy ładowaniu strony, przed ładowaniem kątowym i tworzeniem kontrolerów, przeglądarka będzie próbowała załadować obraz z http://www.gravatar.com/avatar/{{hash}}i zakończy się to niepowodzeniem. Następnie po uruchomieniu angular rozumie, że {{hash}}należy to zastąpić powiedzmy logo.png, teraz atrybut src zmienia się na http://www.gravatar.com/avatar/logo.pngi obraz ładuje się poprawnie. Problem polega na tym, że trwają 2 żądania, a pierwsze kończy się niepowodzeniem.

Aby rozwiązać ten problem, należy użyć ng-srcdyrektywy angular, a angular zamieni ng-srcwartość na atrybut src dopiero po całkowitym załadowaniu ładowania kątowego i kontrolerów, aw tym czasie {{hash}}zostałby już zastąpiony poprawną wartością zakresu.

Nie src="{{phone.imageUrl}}"jest to konieczne i tworzy dodatkowe żądanie w przeglądarce. Przeglądarka wyśle ​​co najmniej 2 GETżądania próbujące załadować ten obraz:

1. zanim wyrażenie zostanie ocenione {{phone.imageUrl}}
2. po ocenie wyrażenia img/phones/motorola-xoom.0.jpg

Zawsze powinieneś używać ng-srcdyrektywy, gdy masz do czynienia z wyrażeniami Angular. <img ng-src="{{phone.imageUrl}}">daje oczekiwany wynik pojedynczego żądania.

Na marginesie , to samo dotyczy, ng-hrefwięc nie masz uszkodzonych linków, dopóki nie rozpocznie się pierwszy cykl podsumowania.

Cóż, w rzeczywistości ma to 100% sensu, ponieważ HTML jest przetwarzany sekwencyjnie, a kiedy ta strona HTML jest przetwarzana wiersz po wierszu, zanim dotrze do tego obrazu, wiersza i przetworzenia obrazu, nasz phone.imageUrlnie jest jeszcze zdefiniowany.

W rzeczywistości Angular JS nie przetworzył jeszcze tego fragmentu kodu HTML i nie szukał jeszcze tych symboli zastępczych i nie podstawił tych wyrażeń wartościami. W rezultacie przeglądarka pobiera tę linię i próbuje pobrać obraz z tego adresu URL.

I oczywiście jest to fałszywy adres URL, jeśli nadal ma w sobie te wąsy i nawiasy klamrowe, i dlatego podaje 404, ale kiedy oczywiście Angular się tym zajmie, zastępuje ten adres URL właściwym, a następnie nadal widzimy obraz, ale nadal komunikat o błędzie 404 pozostaje w naszej konsoli.

Jak więc możemy się tym zająć? Cóż, nie możemy się tym zająć używając zwykłych sztuczek HTML. Ale możemy się tym zająć za pomocą Angulara. Musimy w jakiś sposób powiedzieć przeglądarce, aby nie próbowała pobierać tego adresu URL, ale jednocześnie pobierać go tylko wtedy, gdy Angular jest gotowy do interpretacji tych symboli zastępczych.

Cóż, jednym ze sposobów jest umieszczenie tutaj atrybutu Angular zamiast standardowego HTML. A atrybut Angular jest po prostu ng-src. Więc jeśli powiemy to teraz, wróć, zobaczysz, że nie ma już błędów, ponieważ obraz został pobrany dopiero wtedy, gdy Angular przechwycił ten HTML i przetłumaczył wszystkie wyrażenia na ich wartości.