angularjs ng-style：background-image is not working

我想通過使用角度ng-style（我以前用相同的行爲嘗試過一個自定義指令）應用背景圖像到一個div，但它不似乎工作。angularjs ng-style：background-image is not 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>

雖然，如果我嘗試背景顏色，它似乎工作正常。我嘗試了遠程源和本地源http://lorempixel.com/g/400/200/sports/，都沒有工作。

來源

2013-06-22 Roland

爲background-image正確的語法是：

background-image: url("path_to_image");

爲NG-風格的正確的語法是：

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

來源

2013-06-22 17:02:35 Stewie

該死的......我忘了'url' :)謝謝@Stewie – Roland

btw，我該如何渲染：'{{products.products [currenRoute] .desc}};在HTML？ – Roland

我想'currentRoute'是路線中的產品ID？如果是這種情況，那麼假設你的路由被定義爲'/ products /：'，那麼$ routeParams服務，如果你將它注入到你的控制器中，它將持有對你的id的引用（'$ scope.productId = $ routeParams.id'） ID'。但您可能想爲此提出一個新問題。 – Stewie

159

您可以使用下面的解析動態值：

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

或像這樣：

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

來源

2013-10-28 19:00:26 sqren

+11

這實際上是最好的答案（或者至少對我的問題......） – standup75

你也可以用花括號寫一個表達式：'data-ng-style =「{'background-image'：'url（img/products/{{product.img}}）'}「' –

這是正確的答案。 – Nyxynyx

如果你有你等待服務器返回（item.id），並有一個這樣的結構數據：

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

確保您加入類似ng-if="item.id"

否則你會有兩個請求或一個錯誤。

來源

2014-06-16 15:00:39 flaky

好點:) +1 – Roland

對於那些誰正在努力得到這個工作與IE11

HTML

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

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

來源

2014-11-06 19:26:50 tsuz

你剛剛救了我的生命，現在謝謝..我花了幾個小時試圖找出爲什麼我的ng樣式不顯示在IE 11中。我仍然不明白爲什麼，但這工作！ – w3bMak3r

是唯一在鉻（ubuntu）中工作的所有其他示例或「官方方式」似乎被忽略。風格改變但沒有效果。 – davidkonrad

從記錄上來看，還可以定義在你的對象像這樣的控制器：

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

，然後你可以定義一個函數來改變直接在物體的屬性：

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

以這種方式，你可以dinamicaly修改你的風格做。

來源

2015-08-13 21:29:32 Ezequiel

這工作對我來說，不需要花括號。

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

notification.icon這裏是範圍變量。

來源

2016-01-04 13:11:45 mkkhedawat

如果我們有需要在CSS背景或背景圖像屬性去動態值，也可以只是更棘手位指定。

假設我們的控制器中有getImage（）函數。這個函數返回一個格式如下的字符串： url（icons/pen.png）。如果我們這樣做，則ngStyle聲明中指定的完全相同的方式爲前：

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

確保把周圍的背景圖像鍵名引號。請記住，這必須被格式化爲一個有效的Javascript對象鍵。

來源

2016-06-13 09:27:56

引文的來源是什麼？ – Manas

angularjs ng-style：background-image is not working

回答

相關問題