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.imageUrl
nie 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.