angularjs：ng-src等效于background-image：url（…）
在angularjs中你有标签ng-src ，它的目的是在angularjs获得{{和}}之间的variables之前，你将不会收到一个无效url的错误。
问题是，我用相当一些DIV的background-image设置为一个url。 我这样做是因为出色的CSS3属性background-size将图像裁剪到DIV的确切大小。
唯一的问题是，我收到了很多错误，他们创造了一个ng-src标记完全相同的原因：我有一些variables在url中，浏览器认为图像不存在。
我意识到有可能写一个粗糙的{{"style='background-image:url(myVariableUrl)'"}} ，但这似乎是“脏”的。
我search了很多，找不到正确的方法来做到这一点。 由于所有这些错误，我的应用程序变得一团糟。
ngSrc是一个本地指令，所以你似乎想要一个类似的指令，修改你的div的background-image样式。
你可以编写自己的指令，完全按照你的要求。 例如
app.directive('backImg', function(){ return function(scope, element, attrs){ var url = attrs.backImg; element.css({ 'background-image': 'url(' + url +')', 'background-size' : 'cover' }); }; });
你会这样调用
<div back-img="<some-image-url>" ></div>
JSFiddle与可爱的猫作为奖金： http : //jsfiddle.net/jaimem/aSjwk/1/
这个为我工作
<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>
上面的答案不支持可观的插值（并花费我很多时间试图debugging）。 @BrandonTilley评论中的jsFiddle链接是为我工作的答案，我将在这里重新发布以保存：
app.directive('backImg', function(){ return function(scope, element, attrs){ attrs.$observe('backImg', function(value) { element.css({ 'background-image': 'url(' + value +')', 'background-size' : 'cover' }); }); }; });
使用控制器和模板的示例
控制器：
$scope.someID = ...; /* The advantage of using directive will also work inside an ng-repeat : someID can be inside an array of ID's */ $scope.arrayOfIDs = [0,1,2,3];
模板：
像这样在模板中使用：
<div back-img="img/service-sliders/{{someID}}/1.jpg"></div>
或者像这样：
<div ng-repeat="someID in arrayOfIDs" back-img="img/service-sliders/{{someID}}/1.jpg"></div>
用ng-style也可以这样做：
ng-style="image_path != '' && {'background-image':'url('+image_path+')'}"
这将不会尝试获取不存在的图像。
与hooblei的答案类似，只需要插值：
<li ng-style="{'background-image': 'url({{ image.source }})'}">...</li>
只是一个口味的问题，但如果你喜欢直接访问这个variables或函数：
<div id="playlist-icon" back-img="playlist.icon">
而不是像这样插入：
<div id="playlist-icon" back-img="{{playlist.icon}}">
那么你可以使用scope.$watch来定义这个指令scope.$watch将会在这个属性上执行$parse
angular.module('myApp', []) .directive('bgImage', function(){ return function(scope, element, attrs) { scope.$watch(attrs.bgImage, function(value) { element.css({ 'background-image': 'url(' + value +')', 'background-size' : 'cover' }); }); }; })
这里有更多的背景： AngularJS：$观察和$观察方法之间的区别
我发现有1.5个组件，从DOM中抽象样式，以最好地处理我的asynchronous情况。
例：
<div ng-style="{ 'background': $ctrl.backgroundUrl }"></div>
而在控制器中，有这样的东西：
this.$onChanges = onChanges; function onChanges(changes) { if (changes.value.currentValue){ $ctrl.backgroundUrl = setBackgroundUrl(changes.value.currentValue); } } function setBackgroundUrl(value){ return 'url(' + value.imgUrl + ')'; }
@jaime你的答案是好的。 但是如果你的页面有$ http.get，那么你可以使用ng-if
app.directive('backImg', function(){ return function($scope, $element, $attrs){ var url = $attrs.backImg; $element.css({ 'background-image': 'url(' + url + ')', 'background-size': 'cover' }); } });
在工厂
app.factory('dataFactory', function($http){ var factory = {}; factory.getAboutData = function(){ return $http.get("api/about-data.json"); }; return factory; });
在控制器区域
app.controller('aboutCtrl', function($scope, $http, dataFactory){ $scope.aboutData = []; dataFactory.getAboutData().then(function(response){ // get full home data $scope.aboutData = response.data; // banner data $scope.banner = { "image": $scope.aboutData.bannerImage, "text": $scope.aboutData.bannerText }; }); });
如果你使用ng-if如下图，那么你将通过插值得到图像，否则你不能获取图像，因为指令在HTTP请求之前获取值。
<div class="stat-banner" ng-if="banner.image" background-image-directive="{{banner.image}}">
既然你提到了ng-src ，好像你希望页面在加载图像之前完成渲染，你可以修改jaime的答案，在浏览器完成渲染之后运行native指令。
这篇博文解释得非常好， 从本质window.setTimeout ，在callback函数之前插入window.setTimeout的$timeout包装器 ，在这个函数中对CSS进行修改。
