anglejs ng-style: background-image không hoạt động

Tôi đang cố gắng áp dụng hình nền cho một div bằng cách sử dụng góc ng-style(tôi đã thử một lệnh tùy chỉnh trước đó với cùng một hành vi), nhưng nó dường như không hoạt động.

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

Mặc dù vậy, nếu tôi thử một màu nền, nó có vẻ hoạt động tốt. Tôi đã thử một nguồn từ xa và một nguồn cục bộ http://lorempixel.com/g/400/200/sports/, đều không hoạt động.

Cú pháp đúng cho background-imagelà:

background-image: url("path_to_image");

Cú pháp đúng cho ng-style là:

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

Có thể phân tích cú pháp các giá trị động theo một vài cách.

Nội suy với dấu ngoặc nhọn kép:

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

Nối chuỗi:

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

Các ký tự mẫu ES6:

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

NẾU bạn có dữ liệu, bạn đang đợi máy chủ trả về (item.id) và có cấu trúc như sau:

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

Hãy chắc chắn rằng bạn thêm một cái gì đó như ng-if="item.id"

Nếu không, bạn sẽ có hai yêu cầu hoặc một yêu cầu bị lỗi.

Đối với những người đang đấu tranh để làm cho điều này hoạt động với IE11

HTML

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

JS

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

Điều này làm việc cho tôi, dấu ngoặc nhọn không bắt buộc.

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

thông báo.icon ở đây là biến phạm vi.

Nếu chúng ta có một giá trị động cần đi trong nền css hoặc thuộc tính background-image, thì có thể chỉ định phức tạp hơn một chút.

Giả sử chúng ta có một hàm getImage () trong bộ điều khiển của mình. Hàm này trả về một chuỗi được định dạng tương tự như sau: url (icon / pen.png). Nếu chúng ta làm như vậy, khai báo ngStyle được chỉ định theo cách chính xác như trước:

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

Đảm bảo đặt dấu ngoặc kép xung quanh tên khóa hình nền. Hãy nhớ rằng, điều này phải được định dạng như một khóa đối tượng Javascript hợp lệ.

Chỉ đối với các bản ghi, bạn cũng có thể xác định đối tượng của mình trong bộ điều khiển như sau:

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

và sau đó bạn có thể xác định một hàm để thay đổi thuộc tính của đối tượng một cách trực tiếp:

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

Làm theo cách đó bạn có thể thay đổi phong cách của mình.

Cú pháp được thay đổi cho Angular 2 trở lên:

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