AngularJS ng-style：background-image不起作用

Question

AngularJS ng-style：background-image不起作用

javascriptangularjsangularjs-directiveangularjs-ng-repeatng-style

76

我试图使用Angular的ng-style（之前尝试过具有相同行为的自定义指令）将背景图应用于

，但似乎没有起作用。

<nav
    class="navigation-grid-container"
    data-ng-class="{ bigger: isNavActive == true }"
    data-ng-controller="NavigationCtrl"
    data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true"
    data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false"
    data-ng-show="$parent.navInvisible == false"
    data-ng-animate="'fade'"
    ng-cloak>

    <ul class="navigation-container unstyled clearfix">
        <li
            class="navigation-item-container"
            data-ng-repeat="(key, item) in navigation"
            data-ng-class="{ small: $parent.isNavActive, big: isActive == true }"
            data-ng-mouseenter="isActive = true; isInactive= false"
            data-ng-mouseleave="isActive = false; isInactive= true">

            <div data-ng-switch on="item.id">

                <div class="navigation-item-default" data-ng-switch-when="scandinavia">
                    <a class="navigation-item-overlay" data-ng-href="{{item.id}}">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span>
                        </div>
                    </a>
                    <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
                </div>

                <div class="navigation-item-last" data-ng-switch-when="static">
                    <div class="navigation-item-overlay">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text">
                                <img data-ng-src="{{item.teaser}}">
                            </span>
                        </div>
                    </div>
                    <span class="navigation-item-background">
                        <img class="logo" data-ng-src="{{item.images.logo}}">
                    </span>
                </div>

                <div class="navigation-item-default" data-ng-switch-default>
                    <a class="navigation-item-overlay" data-ng-href="{{item.id}}">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text">{{item.teaser}}</span>
                        </div>
                    </a>
                    <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
                </div>

            </div>
        </li>
    </ul>
</nav>

不过，如果我尝试更改背景颜色，似乎可以正常工作。我也尝试了远程来源和本地来源http://lorempixel.com/g/400/200/sports/，但两者都没有成功。

- Roland

8个回答

114

background-image的正确语法为：

background-image: url("path_to_image");

ng-style的正确语法是：

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">

- Stewie

顺便问一下，我该如何在HTML中呈现像这样的内容：{{products.products[currenRoute].desc}}？ - Roland

我猜 currentRoute 是从路由中获取的产品 ID？如果是这样，那么 $routeParams 服务应该会保存 id 的引用（ $scope.productId = $routeParams.id ），只要您将其注入到控制器中，前提是您的路由定义为 '/products/:id'。但是关于此问题，您可能需要开一个新问题来讨论。 - Stewie

类似这样，但我已经可以访问currentRoute。它是一个字符串，所以我有一个产品列表：http://snippi.com/s/rznpfvo；我的`currentRoute`是一个字符串，它与产品列表中的一个id匹配。由于我不能执行`{{products.products.currentRoute.desc}}`，所以我必须找到另一种方法... - Roland

在您的控制器中使用例如underscore.js：$scope.product = _($scope.products).findWhere({id: $scope.currentRoute})，然后在您的视图中：<span>{{product.title}}</span>。但是让我们不要将评论用作聊天。发布一个新问题。 - Stewie

15

如果您有一个需要等待服务器返回的数据（例如item.id），并且有以下结构：

ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}"

请确保像这样添加ng-if="item.id"，否则你要么会有两个请求，要么只会得到一个错误的请求。

- flaky

10

对于那些无法在IE11上使用的人

HTML

<div ng-style="getBackgroundStyle(imagepath)"></div>

JS

$scope.getBackgroundStyle = function(imagepath){
    return {
        'background-image':'url(' + imagepath + ')'
    }
}

- Taku

2

你刚刚救了我的命，谢谢。我已经花了几个小时试图弄清楚为什么我的ng-style在IE 11中没有显示。我仍然不明白为什么，但这个方法有效！ - w3bMak3r

在Chromium中也是唯一有效的（Ubuntu），所有其他示例或“官方方式”似乎都被忽略了。样式已更改，但没有效果。 - davidkonrad

1

这对我有用，大括号不是必需的。

ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}"

notification.icon是作用域变量。

- mkkhedawat

1

如果我们有一个需要放在css背景或背景图像属性中的动态值，指定起来可能会有点棘手。假设我们在控制器中有一个getImage()函数，该函数返回一个类似于url(icons/pen.png)格式的字符串。如果我们这样做，ngStyle声明的指定方式与之前完全相同：

ng-style="{ 'background-image': getImage() }"

请确保在background-image键名周围加上引号。记住，这必须格式化为有效的Javascript对象键。

- Mohammed Amine

引用的来源是什么？ - Manas

0

仅供记录，您也可以在控制器中定义对象，如下所示：

this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' };

然后，您可以定义一个函数直接更改对象的属性：

this.changeBackgroundImage = function (){
        this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')';
    }

通过这种方式，您可以动态修改样式。

- Ezequiel

0

Angular 2及以上版本的语法已经发生了变化：

[ngStyle]="{'background-image': 'url(path)'}"

- Maihan Nijat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sqren · Accepted Answer

有几种方法可以解析动态值。

使用双花括号进行插值：

ng-style="{'background-image':'url({{myBackgroundUrl}})'}"

字符串拼接：

ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}"

ES6模板字面量：

ng-style="{'background-image': `url(${myBackgroundUrl})`}"