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

回答

相关问题