Я сохраняю исходную строку изображения, которое будет отображаться в HTML в контроллере AngularJS, однако оно дает 404 перед инициализацией контроллера Angular.
Вот HTML:
<div ng-controller="Cont">
<img src="{{imageSource}}">
</div>
Angular контроллер:
var Cont = function($scope) {
$scope.imageSource = '/tests.png';
}
И ошибка, которую я получаю (%7D%7D соответствует {{ в шаблоне).
GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found)
Как я могу предотвратить это? То есть загружать изображение только при инициализации контроллера Angular?
Попробуйте заменить ваш src на ng-src для получения дополнительной информации см. документацию:
Использование Angular разметки типа {{hash}} в атрибуте src не работает right: браузер выберет из URL с литеральным текстом {{hash}} до Angular заменяет выражение внутри {{hash}}. Директива ngSrc решает эту проблему.
<div ng-controller="Cont">
<img ng-src="{{imageSource}}">
</div>
Если кто-то ищет решение для стилизации фонового изображения, используйте это:
<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>