Использование ng-src vs 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 Web Inspector, или проверив журналы доступа к веб-серверу, убедитесь, что приложение действительно делает посторонний запрос к /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

Ошибочный способ написать это:

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

Как правильно это написать:

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

Зачем? это связано с тем, что при загрузке страницы, перед загрузкой angular и созданием контроллеров, браузер попытается загрузить изображение, http://www.gravatar.com/avatar/{{hash}}и это не удастся. Затем, как только angular запущен, он понимает, что {{hash}}его нужно заменить, скажем logo.png, теперь атрибут src изменяется на http://www.gravatar.com/avatar/logo.pngи изображение правильно загружается. Проблема в том, что выполняется 2 запроса, а первый не выполняется.

Чтобы решить эту проблему, мы должны использовать ng-srcдирективу angular, а angular заменит ng-srcзначение в атрибуте src только после полной загрузки angular и контроллеров, и в то время {{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 и преобразовал все выражения в их значения.