106

我将要在 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 控制器初始化后才加载图像?

4

2 回答 2

230

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

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

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>
于 2012-10-16T20:00:09.877 回答
6

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

<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>
于 2016-01-26T10:48:53.157 回答