如何在 AngularJS 中使用图像作为背景？
Posted
技术标签:
【中文标题】如何在 AngularJS 中使用图像作为背景？【英文标题】：How to use an image as background in 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 类。
【参考方案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;，图像也被压缩了。我想要实现的是来自每个源图像：缩小它以匹配圆，居中并隐藏图像的所有其余部分。以上是关于如何在 AngularJS 中使用图像作为背景？的主要内容，如果未能解决你的问题，请参考以下文章
如何用图像作为背景填充 iOS 堆栈视图（UIStackView）？