程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs ng-style:背景图像不起作用大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决angularjs ng-style:背景图像不起作用?

开发过程中遇到angularjs ng-style:背景图像不起作用的问题如何解决?下面主要结合日常开发的经验,给出你关于angularjs ng-style:背景图像不起作用的解决方法建议,希望对你解决angularjs ng-style:背景图像不起作用有所启发或帮助; @H_607_2@正确的语法BACkground-image是:

BACkground-image: url("path_to_image");
@H_607_2@ng-style的正确语法是:

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

解决方法

@H_607_2@我正在尝试通过使用angular将背景图像应用于div 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>
@H_607_2@不过,如果我尝试使用背景色,则效果似乎很好。我也尝试了远程源和本地源http://lorempixel.com/g/400/200/sports/,但都没有用。

大佬总结

以上是大佬教程为你收集整理的angularjs ng-style:背景图像不起作用全部内容,希望文章能够帮你解决angularjs ng-style:背景图像不起作用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。