Использование ng-src vs src

Этот tutorial демонстрирует использование директивы 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 (или /приложение/{{phone.imageUrl}}).

Я сделал это, и это дало мне правильный результат:

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

Есть ли причина, по которой?

Ответы

Ответ 1

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

Это дает ожидаемый результат, потому что phone.imageUrl оценивается и заменяется его значением после загрузки angular.

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

Но при этом браузер пытается загрузить изображение с именем {{phone.imageUrl}}, что приводит к неудачному запросу. Вы можете проверить это в консоли своего браузера.

Ответ 2

Из угловых документов

Глючный способ написать это:

<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}} должен быть заменен, скажем, logo.png, теперь атрибут src изменяется на http://www.gravatar.com/avatar/logo.png и изображение загружается правильно. Проблема в том, что идет 2 запроса и первый сбой.

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

Ответ 3

src="{{phone.imageUrl}}" не требуется и создает дополнительный запрос браузером. Браузер сделает как минимум 2 GET запросов, пытающихся загрузить это изображение:

  • перед оценкой выражения {{phone.imageUrl}}
  • после вычисления выражения img/phones/motorola-xoom.0.jpg

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

В боковом примечании то же самое относится к ng-href, поэтому вы не получите сломанные ссылки до тех пор, пока не начнется первый цикл дайджест.

Ответ 4

Ну, на самом деле это составляет 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 и перевело все выражения в их значения.