图片使用AngularJS获取请求

我在AngularJS控制器中存储要呈现在HTML中的图像的源string，但是在Angular控制器被初始化之前，它会产生一个404。

这里是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控制器初始化的时候才加载图像。

Answer 1

尝试使用ng-srcreplacesrc以获取更多信息，请参阅文档 ：

在src属性中使用{{hash}}这样的Angular标记是行不通的：浏览器将从URL中获取文本{{hash}}，直到Angularreplace{{hash}}中的expression式。 ngSrc指令解决了这个问题。

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

Answer 2

如果有人正在寻找解决scheme的样式背景图像然后使用这个：

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