angularjs ng-style: 배경 이미지가 작동하지 않습니다.

angularjs ng-style: 배경 이미지가 작동하지 않습니다.

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>

그래도 배경색을 써보면 잘 되는 것 같아요.원격 소스 및 로컬 소스도 시도했습니다.http://lorempixel.com/g/400/200/sports/, 둘 다 작동하지 않았다.

동적 값은 몇 가지 방법으로 해석할 수 있습니다.

이중 곡선 가새로 보간:

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

문자열 연결:

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

ES6 템플릿 리터럴:

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

올바른 구문background-image다음과 같습니다.

background-image: url("path_to_image");

ng-style의 올바른 구문은 다음과 같습니다.

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

데이터가 있는 경우, 서버가 (item.id) 반환되기를 기다리고 있으며 다음과 같은 구조를 가지고 있습니다.

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

꼭 이런 걸 넣으세요.ng-if="item.id"

그렇지 않으면 두 가지 요청이 발생하거나 한 가지 오류가 발생합니다.

IE11을 사용하는 데 어려움을 겪고 있는 분들을 위해

HTML

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

JS

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

이 방법은 효과가 있었어요, 곱슬곱슬한 교정기는 필요 없어요.

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

notification.icon은 스코프 변수입니다.

css background 또는 background-image Atribute에 넣을 필요가 있는 다이내믹 값이 있는 경우 지정이 조금 더 까다로울 수 있습니다.

컨트롤러에 getImage() 함수가 있다고 칩시다.이 함수는 url(icons/pen.png)과 유사한 형식의 문자열을 반환합니다.이 경우 ngStyle 선언은 이전과 동일한 방식으로 지정됩니다.

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

---

배경 이미지 키 이름 주위에 따옴표를 넣어야 합니다.이것은 유효한 Javascript 객체 키로 포맷되어야 합니다.

레코드에 대해서만 다음과 같이 컨트롤러에서 개체를 정의할 수도 있습니다.

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

그런 다음 개체의 속성을 직접 변경하는 함수를 정의할 수 있습니다.

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

그렇게 하면 당신의 스타일을 수정할 수 있습니다.

Angular 2 이상에서는 구문이 변경되었습니다.

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

언급URL : https://stackoverflow.com/questions/17252546/angularjs-ng-style-background-image-isnt-working