图像使用AngularJS获取请求

Question

我在AngularJS控制器中存储要以HTML格式呈现的图像的源字符串,但是在初始化Angular控制器之前它会产生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) 

我怎样才能防止这种情况发生？也就是说,只在Angular控制器初始化时才加载图像？

Answer 1

尝试用ng-src替换你的src以获取更多信息,请参阅文档:

在src属性中使用{{hash}}之类的Angular标记无法正常工作:浏览器将使用文字文本{{hash}}从URL中获取,直到Angular替换{{hash}}中的表达式.ngSrc指令解决了这个问题.

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

Answer 2

如果有人正在搜索样式背景图像的解决方案,那么使用此:

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