在AngularJS中添加带有'ng-style'的背景图片

Posted 2023-03-06

【中文标题】在AngularJS中添加带有\'ng-style\'的背景图片

【英文标题】：Adding background image with 'ng-style' in AngularJS在AngularJS中添加带有'ng-style'的背景图片

【发布时间】：2013-08-31 08:24:55

【问题描述】：

我似乎无法使用控制器来设置 div 的 CSS 背景属性。根据文档，到目前为止，这是我的代码：

html：

<div class="hero" ng-controller="HeroCtrl" ng-style="heroImage"></div>

JS：

'use strict';

angular.module('AppliedSiteApp').controller('HeroCtrl', function ($scope) 

    $scope.heroImage = 
        background: 'images/brick.jpg'
    ;

    console.log($scope.heroImage);

);

CSS：

.hero 
    width: 100%;
    min-height: 350px;
    background-position: center center;

我还尝试在 Fiddle here 中复制此设置。有人有什么想法吗？

【参考方案1】：

AngularJS 现在支持ng-style。

所以现在你可以使用ng-style=" backgroundImage: variableInScope + '/some/string' "

【参考方案2】：

背景图片需要使用css的url()函数，像这样：

'background-image': 'url(http://i.stack.imgur.com/mfvI9.jpg)'

Plunker：http://plnkr.co/edit/PFUY0w?p=preview

【讨论】：

要使用动态数据，你应该这样做 ng-style=" 'background-image': 'url(' + data.url + ')' ">

【参考方案3】：

$scope.heroImage = 
    background: 'url(images/brick.jpg)'
;

background-image 需要url() 才能工作。