How to use an image as background in AngularJS?

Question

Here is the problem :

This thing is turning me crazy since three days... I would like to use an angularJS variable as background image without using a directive.

My goal is to load any type of image (square, rectangle...etc), reduce it to match a 150px circle size (hidden what's too much) and center it into my page, without the image being squeezed (so keep the aspect ratio).

I'm using ionic 1.0, angular 1.6, so i tried to import this directive : https://www.npmjs.com/package/angular-background-image/v/0.1.2 but this doesn't work because of the "require" part.

I followed this angularjs: ng-src equivalent for background-image:url(...) but either this didn't work.

Here is the final solution :

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>

You cannot write an `ng-style` statement like that. If those are all constants, why are you even using `ng-style` in the first place? Please review the AngularJS docs on how `ng-style` works. Also, your plunker doesn't load - it just gives a bunch of angular errors. I fixed it a bit but am still unsure if this is what you are trying to achieve: https://plnkr.co/edit/45o6uPMcHWJVxx4JF5D9 — james00794, Nov 07 '18 at 13:12
Actually, called like this `data-ng-src="{{avatar}}"` the image remains an image and not a background, that's why i tried to set it as background using `ng-style`, but you are right it was not the good way to do so.. :/ — Memphis, Nov 07 '18 at 14:08
I see - I misunderstood what you were trying to do. Actually, `ng-style` is a reasonable thing to use here. It doesn't really make sense to use a `background-image` on an `img` though, so I would suggest using a `div` instead. The trick is to only set the `background-image` property with ng-style... everything else can be set in a css class/id. See my new example plunker: https://next.plnkr.co/edit/djiM21laCmmTxyw8 — james00794, Nov 07 '18 at 14:35
Oh wow you made my day ! That's exactly what i tried to achieve. There is just a last thing i need to understand, how to set the circle around the image ? I tried this way, but had a strange behaviour : https://next.plnkr.co/edit/ZFaO5mgdjOGR7h8z — Memphis, Nov 07 '18 at 15:50
Just add `border: 3px solid red;` to the `#rounded-image` selector. No need to add that `circle-image` class. — james00794, Nov 07 '18 at 16:16

score 2 · Accepted Answer · answered Nov 07 '18 at 13:25

After fixing all the syntax errors, the code seems to work.

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>

The image is centered in the circle.

Thanks for the answer ! Yes this is the results I'm getting on the app, the problem is i'm getting a squeezed image, instead of a crop one... Even if I write `background-size: contain;` the image is squeezed. What i'm trying to achieve is from every source image : reduce it to match the cercle, center it and hidden all the rest of the image. — Memphis, Nov 07 '18 at 13:39

How to use an image as background in AngularJS?

Here is the problem :

Here is the final solution :

1 Answers1