Question

这是问题所在：

自三天以来，这件事使我发疯……我想不使用指令就将angularJS变量用作背景图像。

我的目标是加载任何类型的图像（正方形，矩形等），减小其大小以匹配150px的圆圈大小（隐藏太多）并将其居中放置在我的页面中，而不会挤压图像（因此保持宽高比）。

我使用的是离子1.0，角度为1.6，所以我尝试导入该指令：https://www.npmjs.com/package/angular-background-image/v/0.1.2，但是由于“需要”部分而无法使用。

我遵循了这个angularjs: ng-src equivalent for 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>

Answer 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>

图像位于圆圈中心。

如何在AngularJS中使用图像作为背景？

这是问题所在：

这是最终解决方案：

1 个答案: