使用`background-image`添加AngularJS的背景圖像

我想將背景圖像添加到我的離子應用程序，但無法弄清楚如何。使用`background-image`添加AngularJS的背景圖像

我codepen給出here

我的HTML如下

<body> 
<div ng-controller="ImageController"> 
<div ng-style="{'background-image':'url({{images}})'}" style="height: 100px"></div> 
</div>

我的JS給出以下

angular.module('starter.controllers', []) 
    .controller("ImageController", function($scope){ 
    console.log("Hi there") 
    $scope.images= "http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg" 
});

預期的行爲是給定：圖像應跨越背景完全。

當前的行爲：exists代替圖像

來源

2017-02-28 lordlabakdas

app.directive('backImg', function(){ 
    return function(scope, element, attrs){ 
     var url = attrs.backImg; 
     element.css({ 
      'background-image': 'url(' + url +')', 
      'background-size' : 'cover' 
     }); 
    }; 
});

空白屏幕試試自己的指令

<div back-img="<some-image-url>" ></div>

看這也是，我發現這裏的解決方案：angularjs: ng-src equivalent for background-image:url(...)

來源

2017-02-28 13:14:44

嘗試

<div ng-style="{'background-image':'url('+images+')'}" style="height: 100px"></div>

來源

2017-02-28 13:16:06

用'div'更新了codepen。似乎沒有工作 – lordlabakdas

@lordlabakdas您的codepen已損壞，請勿在模塊名稱中使用點，並且這兩種方法（您的和我的建議的一種）都可以工作：http://codepen.io/anon/pen/LWpWvv？編者= 1111 –

非常感謝@johannes。有用 – lordlabakdas

使用`background-image`添加AngularJS的背景圖像

回答

相關問題