使用 AngularJS 获取图像请求答案

【问题标题】：Image Get Requests with AngularJS使用 AngularJS 获取图像请求
【发布时间】：2012-10-07 00:20:04
【问题描述】：

我将要在 AngularJS 控制器中以 HTML 形式呈现的图像的源字符串存储在 AngularJS 控制器中，但是在初始化 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控制器初始化后才加载图片？

【问题讨论】：

【解决方案1】：

尝试用 ng-src 替换您的 src 以获取更多信息，请参阅the documentation：

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不起作用右：浏览器将从带有文字文本的 URL 中获取 {{hash}} 直到 Angular 替换 {{hash}} 中的表达式。这 ngSrc 指令解决了这个问题。

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

【讨论】：

【解决方案2】：

如果有人正在搜索设置背景图像样式的解决方案，请使用：

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

【讨论】：