Struggling with a Dilemma:
This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive.
My objective is to load images of any shape (square, rectangle, etc.), resize them to fit into a 150px circle (hiding excess), center them on my page, all while maintaining their original aspect ratio.
I am currently using Ionic 1.0 and Angular 1.6, so I attempted to incorporate this directive: https://www.npmjs.com/package/angular-background-image/v/0.1.2, but it failed due to the "require" component.
I also looked into this resource: angularjs: ng-src equivalent for background-image:url(...), but that did not provide a solution either.
The Ultimate Answer:
Plunker Link :
// Code block storing the image URL
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>