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

【问题标题】：Adding background image with AngularJS using `background-image`使用 `background-image` 使用 AngularJS 添加背景图像
【发布时间】：2017-02-28 21:16:06
【问题描述】：

我正在尝试向我的 ionic 应用程序添加背景图片，但不知道如何操作。

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

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

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

【问题讨论】：

标签： javascript html angularjs ionic-framework

【解决方案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(...)

【讨论】：

【解决方案2】：

试试

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

【讨论】：

用div 更新了codepen。似乎不起作用
@lordlabakdas 你的代码笔坏了，不要在模块名称中使用点，两种方法（你的和我建议的）都可以工作：codepen.io/anon/pen/LWpWvv?editors=1111