首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >angularjs ng-style:背景图像不工作

angularjs ng-style:背景图像不工作
EN

Stack Overflow用户
提问于 2013-06-22 23:54:18
回答 5查看 111.9K关注 0票数 76

我正在尝试使用angular ng-style将背景图像应用到div (我之前使用相同的行为尝试了一个自定义指令),但它似乎不起作用。

<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/,都不起作用。

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-06-23 01:02:36

background-image的正确语法为:

background-image: url("path_to_image");

ng样式的正确语法是:

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

Stack Overflow用户

发布于 2014-06-16 23:00:39

如果您有数据,那么您正在等待服务器返回(item.id),并具有如下结构:

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

确保添加了类似于ng-if="item.id"的内容

否则,你要么有两个请求,要么有一个错误。

票数 15
EN

Stack Overflow用户

发布于 2016-01-04 21:11:45

这对我很有效,大括号不是必需的。

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

这里的notification.icon是作用域变量。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17252546

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档