Zastosowanie NG-src vs src

Question

Ten tutorial demonstruje użycie dyrektywy ngSrc zamiast src:

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

pytają się:

Wymień dyrektywę ng-src ze zwykły stary atrybut src.
wykorzystaniem narzędzi takich jak Firebug lub Chrome Web Inspector lub inspekcji dzienniki dostępu serwer, upewnij się, że aplikacja jest rzeczywiście dokonywania obcych żądanie /app/%7B%7Bphone.imageUrl%7D%7D (lub /app/{{phone.imageUrl}}).

Zrobiłem tak i on dał mi poprawny wynik:

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

Czy istnieje powód, dlaczego?

Answer 1

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

To daje oczekiwany rezultat, ponieważ phone.imageUrl jest oceniany i zastąpione przez wartości kątowe po załadowaniu.

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

Ale z tego, przeglądarka próbuje załadować obraz o nazwie {{phone.imageUrl}}, co powoduje nieudanej życzenie. Możesz to sprawdzić w konsoli przeglądarki.

Answer 2

Od kątowe docs

Wózek spacerowy sposób napisać go:

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

Prawidłowy sposób napisać go:

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

Dlaczego? dzieje się tak, ponieważ po załadowaniu strony, przed załadowaniem kątowym i utworzeniem kontrolerów, przeglądarka spróbuje wczytać obraz z http://www.gravatar.com/avatar/{{hash}} i zakończy się niepowodzeniem. Następnie, gdy zaczyna się kąt, rozumie, że {{hash}} musi zostać zastąpiony przez na przykład logo.png, teraz atrybut src zmienia się na http://www.gravatar.com/avatar/logo.png, a obraz ładuje się prawidłowo. Problem polega na tym, że są 2 żądania, a pierwsza nie.

rozwiązać ten powinien używamy ng-src który jest kanciasty dyrektywa i kanciasty zastąpi ng-src wartość w atrybucie src dopiero po kątowe ładującego i sterowniki są w pełni załadowany, a w tym czasie {{hash}} by zostały już zastąpione prawidłowego zakresu wartość.

Answer 3

Urządzenie src="{{phone.imageUrl}}" jest zbędne i tworzy dodatkowe żądanie przeglądarki.Przeglądarka uczyni przynajmniej 2 GET wnioski próbuje załadować ten obraz:

1. przed wyrażeniem jest uwzględniany {{phone.imageUrl}}
2. po wyrazem jest oceniany img/phones/motorola-xoom.0.jpg

Zawsze należy użyć dyrektywy ng-src gdy mamy do czynienia z wyrażeniami kątowymi. <img ng-src="{{phone.imageUrl}}"> podaje oczekiwany wynik pojedynczego żądania.

---

Na marginesie, to samo dotyczy ng-href więc nie dostać linki do pierwszego kopnięcia strawić cyklu.

Answer 4

No faktycznie to robi 100% sens, ponieważ HTML zostanie przetworzony sekwencyjnie i kiedy ta strona HTML jest przetwarzana linia po linii, do czasu, gdy dojdzie do tego obrazu, linii i przetwarzania obrazu, nasza phone.imageUrl nie jest jeszcze zdefiniowana.

W rzeczywistości Angular JS nie przetworzył jeszcze tego fragmentu kodu HTML i nie szukał jeszcze tych symboli zastępczych i nie zamienił tych wyrażeń na wartości. Tak więc dzieje się tak, że przeglądarka pobiera tę linię i próbuje pobrać ten obraz pod tym adresem URL.

Oczywiście jest to fałszywy URL, jeśli nadal ma w sobie te wąsy i nawiasy klamrowe, a więc daje 404, ale gdy oczywiście zajmuje się tym Angular, zastępuje ten URL właściwym jeden, a następnie nadal widzimy obraz, ale komunikat o błędzie 404 pozostaje w naszej konsoli.

Jak możemy się tym zająć? Cóż, nie możemy się tym zająć, używając zwykłych sztuczek HTML. Ale możemy zająć się tym za pomocą Angular. Musimy jakoś 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.

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