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: plnkr.co/edit/45o6uPMcHWJVxx4JF5D9 — james00794
– james00794, Commented Nov 7, 2018 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
– Memphis, Commented Nov 7, 2018 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: next.plnkr.co/edit/djiM21laCmmTxyw8 — james00794
– james00794, Commented Nov 7, 2018 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 : next.plnkr.co/edit/ZFaO5mgdjOGR7h8z — Memphis
– Memphis, Commented Nov 7, 2018 at 15:50
Just add border: 3px solid red; to the #rounded-image selector. No need to add that circle-image class. — james00794
– james00794, Commented Nov 7, 2018 at 16:16

georgeawg · Accepted Answer · 2018-11-07 13:25:16Z

2

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.

answered Nov 7, 2018 at 13:25

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Memphis Over a year ago

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.

Collectives™ on Stack Overflow

How to use an image as background in AngularJS?

Here is the problem :

Here is the final solution :

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Here is the problem :

Here is the final solution :

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related