angularjs ng-style:背景图像不起作用 [英] angularjs ng-style: background-image isn't working

查看：27
本文介绍了angularjs ng-style:背景图像不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用有角度的 ng-style 将背景图像应用于 div(我之前尝试过具有相同行为的自定义指令)，但似乎不是工作.

<ul class="navigation-container unstyled clearfix"><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>

</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 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>

<span class="navigation-item-background"><img class="logo" data-ng-src="{{item.images.logo}}"></span>

<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>

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

</nav>

不过，如果我尝试使用背景颜色，它似乎工作正常.我也尝试了远程源和本地源 http://lorempixel.com/g/400/200/sports/，但都没有奏效.

解决方案

background-image 的正确语法是:

background-image: url("path_to_image");

ng-style 的正确语法是:

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

I'm trying to apply a background image to a div by using the angular ng-style ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working.

<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>

Though, if I do try a background color, it seems to be working fine. I tried a remote source and a local source too http://lorempixel.com/g/400/200/sports/, neither worked.

解决方案

Correct syntax for background-image is:

background-image: url("path_to_image");

Correct syntax for ng-style is:

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

这篇关于angularjs ng-style:背景图像不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆