Displaying avatar images in PersonCardComponent as background-images for background-size:cover functionality. Added sample avatar images for development environment.

src/main/angular/src/peoplesearch/person-card.component.html

@@ -1,7 +1,5 @@
 <div class="person-card-content" ng-switch="$ctrl.size">
-    <div class="avatar">
-        <img ng-src="{{ $ctrl.person.photoURL }}" ng-if="$ctrl.person.photoURL" alt="User photo">
-    </div>
+    <div class="avatar" ng-style="$ctrl.getAvatarStyle()" aria-label="User avatar"></div>
     <div class="reports" ng-if="$ctrl.directReports.length" ng-bind="$ctrl.directReports.length"></div>
 
     <div class="details" ng-switch-when="small">

src/main/angular/src/peoplesearch/person-card.component.ts

@@ -32,6 +32,16 @@ export default class PersonCardComponent {
         }
     }
 
+    getAvatarStyle(): any {
+        if (this.person && this.person.photoURL) {
+            return {
+                'background-image': 'url(' + this.person.photoURL + ')'
+            };
+        }
+
+        return {};
+    }
+
     private setDisplayData() {
         // This data is only available on people search views
         if (this.person.givenName && this.person.sn) {

src/main/angular/src/services/people.data.json

@@ -8,7 +8,7 @@
     "telephoneNumber": "(564) 683-6597",
     "title": "Senior Sales Associate",
     "managerId": null,
-    "photoURL": null,
+    "photoURL": "/images/avatars/1.jpg",
     "displayNames": [
       "Jean Ryan",
       "jryan0@csmonitor.com",
@@ -78,7 +78,7 @@
     "telephoneNumber": "(567) 798-6155",
     "title": "Quality Engineer",
     "managerId": 1,
-    "photoURL": null,
+    "photoURL": "/images/avatars/2.jpg",
     "displayNames": [
       "Ruby Bowman",
       "rbowman1@pinterest.com",
@@ -148,7 +148,7 @@
     "telephoneNumber": "(523) 622-4293",
     "title": "Community Outreach Specialist",
     "managerId": 1,
-    "photoURL": null,
+    "photoURL": "/images/avatars/3.jpg",
     "displayNames": [
       "William Carter",
       "wcarter2@delicious.com",
@@ -218,7 +218,7 @@
     "telephoneNumber": "(345) 682-1430",
     "title": "Research Nurse",
     "managerId": 1,
-    "photoURL": null,
+    "photoURL": "/images/avatars/4.jpg",
     "displayNames": [
       "Alan Snyder",
       "asnyder3@blinklist.com",
@@ -288,7 +288,7 @@
     "telephoneNumber": "(457) 877-1797",
     "title": "Financial Analyst",
     "managerId": 2,
-    "photoURL": null,
+    "photoURL": "/images/avatars/5.jpg",
     "displayNames": [
       "Aaron Alvarez",
       "aalvarez4@ezinearticles.com",
@@ -358,7 +358,7 @@
     "telephoneNumber": "(268) 336-2705",
     "title": "Accountant II",
     "managerId": 2,
-    "photoURL": null,
+    "photoURL": "",
     "displayNames": [
       "Deborah Morrison",
       "dmorrison5@nytimes.com",
@@ -428,7 +428,7 @@
     "telephoneNumber": "(638) 951-3305",
     "title": "Design Engineer",
     "managerId": 2,
-    "photoURL": null,
+    "photoURL": "/images/avatars/7.jpg",
     "displayNames": [
       "Mildred Hayes",
       "mhayes6@house.gov",
@@ -498,7 +498,7 @@
     "telephoneNumber": "(564) 818-6794",
     "title": "Structural Engineer",
     "managerId": 3,
-    "photoURL": null,
+    "photoURL": "/images/avatars/8.jpg",
     "displayNames": [
       "Margaret Holmes",
       "mholmes7@nbcnews.com",
@@ -568,7 +568,7 @@
     "telephoneNumber": "(206) 987-9763",
     "title": "Junior Executive",
     "managerId": 3,
-    "photoURL": null,
+    "photoURL": "/images/avatars/9.jpg",
     "displayNames": [
       "Jack Jackson",
       "jjackson8@thetimes.co.uk",
@@ -638,7 +638,7 @@
     "telephoneNumber": "(751) 250-5973",
     "title": "Chief Design Engineer",
     "managerId": 3,
-    "photoURL": null,
+    "photoURL": "/images/avatars/10.jpg",
     "displayNames": [
       "Judy Butler",
       "jbutler9@reference.com",
@@ -708,7 +708,7 @@
     "telephoneNumber": "(205) 653-6795",
     "title": "Engineer IV",
     "managerId": 9,
-    "photoURL": null,
+    "photoURL": "/images/avatars/11.jpg",
     "displayNames": [
       "Tina Gutierrez",
       "tgutierreza@godaddy.com",
@@ -778,7 +778,7 @@
     "telephoneNumber": "(816) 816-8474",
     "title": "Human Resources Manager",
     "managerId": 9,
-    "photoURL": null,
+    "photoURL": "/images/avatars/12.jpg",
     "displayNames": [
       "Jose Cox",
       "jcoxb@stumbleupon.com",
@@ -848,7 +848,7 @@
     "telephoneNumber": "(207) 691-7625",
     "title": "Internal Auditor",
     "managerId": 4,
-    "photoURL": null,
+    "photoURL": "",
     "displayNames": [
       "Paul Barnes",
       "pbarnesc@mediafire.com",
@@ -918,7 +918,7 @@
     "telephoneNumber": "(133) 596-4078",
     "title": "Automation Specialist I",
     "managerId": 14,
-    "photoURL": null,
+    "photoURL": "/images/avatars/14.jpg",
     "displayNames": [
       "Joe Stevens",
       "jstevensd@ocn.ne.jp",
@@ -988,7 +988,7 @@
     "telephoneNumber": "(343) 776-3486",
     "title": "Safety Technician I",
     "managerId": 20,
-    "photoURL": null,
+    "photoURL": "/images/avatars/15.jpg",
     "displayNames": [
       "Randy Grant",
       "rgrante@europa.eu",
@@ -1058,7 +1058,7 @@
     "telephoneNumber": "(285) 576-0850",
     "title": "Compensation Analyst",
     "managerId": 9,
-    "photoURL": null,
+    "photoURL": "/images/avatars/16.jpg",
     "displayNames": [
       "Martin Mason",
       "mmasonf@who.int",
@@ -1128,7 +1128,7 @@
     "telephoneNumber": "(594) 905-7773",
     "title": "Data Coordiator",
     "managerId": 16,
-    "photoURL": null,
+    "photoURL": "/images/avatars/17.jpg",
     "displayNames": [
       "Cynthia Porter",
       "cporterg@a8.net",
@@ -1198,7 +1198,7 @@
     "telephoneNumber": "(444) 231-5492",
     "title": "Business Systems Development Analyst",
     "managerId": 17,
-    "photoURL": null,
+    "photoURL": "/images/avatars/18.jpg",
     "displayNames": [
       "Nancy Burns",
       "nburnsh@wordpress.org",
@@ -1268,7 +1268,7 @@
     "telephoneNumber": "(675) 799-8793",
     "title": "Structural Engineer",
     "managerId": 18,
-    "photoURL": null,
+    "photoURL": "/images/avatars/19.jpg",
     "displayNames": [
       "Jimmy Montgomery",
       "jmontgomeryi@addtoany.com",
@@ -1338,7 +1338,7 @@
     "telephoneNumber": "(658) 289-4550",
     "title": "Desktop Support Technician",
     "managerId": 19,
-    "photoURL": null,
+    "photoURL": "/images/avatars/20.jpg",
     "displayNames": [
       "Bruce Carroll",
       "bcarrollj@paypal.com",
@@ -1408,7 +1408,7 @@
     "telephoneNumber": "(454) 249-4440",
     "title": "No Real Position",
     "managerId": null,
-    "photoURL": null,
+    "photoURL": "/images/avatars/21.jpg",
     "displayNames": [
       "Orphan User",
       "orphan.user@gmail.com",

src/main/angular/webpack.common.js

@@ -66,7 +66,8 @@ module.exports = {
     plugins: [
         new CopyWebpackPlugin([
             { from: 'vendor/angular-ui-router.js', to: 'vendor/' },
-            { from: 'node_modules/angular/angular.js', to: 'vendor/' }
+            { from: 'node_modules/angular/angular.js', to: 'vendor/' },
+            { from: 'images/', to: 'images/' }
         ]),
 
         new HtmlWebpackPlugin({