Зображення Отримайте запити за допомогою 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) 

Як я можу запобігти цьому? Тобто завантажувати зображення лише після ініціалізації кутового контролера?

Спробуйте замінити 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>