AngularJS нг-если генерирует ошибку при использовании для загрузки изображения

Question

AngularJS нг-если генерирует ошибку при использовании для загрузки изображения

0

Я получаю ошибку не обнаружен, когда загружаю значок, используя следующую HTML-разметку AngularJS (все работает графически):

<div class="page-icon" ng-if="icon != null">
    <img src="{{icon}}">
</div>

Что генерирует следующую ошибку:

GET http://localhost/%7B%7Bicon%7D%7D 404 (Not Found)

user2476265 02 нояб. 2015, в 23:52

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Pedro M. Silva · Accepted Answer · 2015-11-02T20-06-00.000Z

Вместо этого используйте атрибут ng-src.

<div class="page-icon" ng-if="icon != null">
    <img ng-src="{{icon}}">
</div>

Почему это происходит? В основном, потому что до того, как угловой даже ударит, браузер посмотрит на DOM и найдет изображение с src со значением {{icon}}. И он попытается загрузить изображение из http://localhost/{{icon}}. Конечно, он не найдет никого.

После того, как AngularJs сделает это, команда src будет заполнена правильным значением, и изображение будет загружено и представлено.

То, что ng-src делает, ждет, когда icon переменной будет иметь значение хотя бы один раз и только после этого установит значение для реального атрибута src. Это означает, что только тогда браузер знает, что есть изображение для загрузки, и у него уже есть правильный URL.