如何在 AngularJS 中使用图像作为背景？答案

【问题标题】：How to use an image as background in AngularJS?如何在 AngularJS 中使用图像作为背景？
【发布时间】：2019-04-10 21:49:55
【问题描述】：

这是问题：

三天以来这件事让我发疯......我想使用 angularJS 变量作为背景图像而不使用指令。

我的目标是加载任何类型的图像（正方形、矩形...等），将其缩小以匹配 150 像素的圆形大小（隐藏太多）并将其居中放置在我的页面中，而不会挤压图像（所以保持纵横比）。

我使用的是 ionic 1.0，angular 1.6，所以我尝试导入此指令：https://www.npmjs.com/package/angular-background-image/v/0.1.2，但由于“需要”部分，这不起作用。

我关注了这个angularjs: ng-src equivalent for background-image:url(...)，但要么这没用。

这是最终的解决方案：

Plunker：https://next.plnkr.co/edit/HMexvebJBXLg9Auu

// Here is the variable containing the image link

var app = angular.module('app', []);

app.controller("Ctrl",function($scope){
  
  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";
});

#rounded-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    border: 3px solid red;
    margin-left: auto;
    margin-right: auto;
}

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="Ctrl">
  <div>
      <div ng-style="{'background-image': 'url(' + avatar + ')'}" id="rounded-image"></div>
  </div>
  </body>

【问题讨论】：

你不能写出这样的ng-style 语句。如果这些都是常数，那你为什么还要使用ng-style？请查看有关 ng-style 工作原理的 AngularJS 文档。此外，您的 plunker 不会加载 - 它只会给出一堆角度错误。我修复了一点，但仍然不确定这是否是您想要实现的目标：plnkr.co/edit/45o6uPMcHWJVxx4JF5D9
实际上，像这样调用data-ng-src="{{avatar}}" 图像仍然是图像而不是背景，这就是为什么我尝试使用ng-style 将其设置为背景，但你是对的，这不是好方法这样做.. :/
我明白了 - 我误解了你想要做什么。实际上，ng-style 在这里使用是合理的。不过，在img 上使用background-image 并没有什么意义，所以我建议改用div。诀窍是仅使用 ng 样式设置 background-image 属性...其他所有内容都可以在 css 类/id 中设置。查看我的新示例 plunker：next.plnkr.co/edit/djiM21laCmmTxyw8
哦，哇，你成就了我的一天！这正是我试图实现的。我只需要了解最后一件事，如何围绕图像设置圆圈？我试过这种方式，但有一个奇怪的行为：next.plnkr.co/edit/ZFaO5mgdjOGR7h8z
只需将border: 3px solid red; 添加到#rounded-image 选择器。无需添加 circle-image 类。

标签： html css angularjs

【解决方案1】：

修复所有语法错误后，代码似乎可以工作了。

var app = angular.module('app', []);

app.controller("Ctrl",function($scope){
  
  $scope.avatar = "https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg";
});

#rounded-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    border: 5px solid rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

#rounded-image:before {
    content: "";
    /* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */
    background-size: cover;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

  <script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="Ctrl">
    <img data-ng-src="{{avatar}}" id="rounded-image">
  </body>

图像以圆圈为中心。

【讨论】：

感谢您的回答！是的，这是我在应用程序上得到的结果，问题是我得到的是压缩图像，而不是裁剪图像……即使我写background-size: contain;，图像也被压缩了。我想要实现的是来自每个源图像：缩小它以匹配圆，居中并隐藏图像的所有其余部分。