Изображение получить запросы с AngularJS

я храню исходную строку изображения, которое будет отображаться в HTML в контроллере AngularJS, однако он дает 404 до инициализации углового контроллера.

вот HTML:

 <div ng-controller="Cont">
      <img src="{{imageSource}}">
 </div>

угловой контроллер:

 var Cont = function($scope) {
      $scope.imageSource = '/tests.png';
 }

и ошибка, которую я получаю (%7D%7D соответствует {{ в шаблоне).

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found) 

как я могу предотвратить это? То есть, только загрузить изображение, когда угловой контроллер был инициализирован?

2 ответов


попробуйте заменить src на ng-src для получения дополнительной информации см. документация:

использование угловой разметки, такой как {{hash}} в атрибуте src, не работает справа: браузер будет извлекать из URL-адреса с буквальным текстом {{hash}} пока Angular не заменит выражение внутри {{hash}}. Этот директива ngSrc решает эту проблему.

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>

Если кто-то ищет решение для стилизации фонового изображения, используйте это:

<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>