Question

我正在尝试向我的离子应用添加背景图片，但无法弄清楚如何。

我的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"
});

预期行为：图像应完全跨越背景。

当前行为：存在空白屏幕而不是图像

Answer 1

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(...)

Answer 2

尝试

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

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

2 个答案: