Как использовать изображение в качестве фона в AngularJS? - PullRequest
Новая
       5

Как использовать изображение в качестве фона в AngularJS?

0 голосов
/ 07 ноября 2018

Вот проблема:

Эта вещь сводит меня с ума уже три дня ... Я хотел бы использовать переменную angularJS в качестве фонового изображения без использования директивы.

Моя цель - загрузить изображение любого типа (квадрат, прямоугольник и т. Д.), Уменьшить его до размера круга в 150 пикселей (слишком много скрыто) и отцентрировать его на моей странице без сжатия изображения (так что сохранить соотношение сторон).

Я использую ionic 1.0, angular 1.6, поэтому я попытался импортировать эту директиву: https://www.npmjs.com/package/angular-background-image/v/0.1.2, но это не работает из-за части "require".

Я следовал этому angularjs: ng-src эквивалент для background-image: url (...) , но либо это не сработало.

Вот окончательное решение:

Плункер: 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>

1 Ответ

0 голосов
/ 07 ноября 2018

После исправления всех синтаксических ошибок код, кажется, работает. 

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>

Изображение центрируется по кругу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...