fix(chips): do not display broken image when no image is provided

When no image property is defined on the user model, do not render an `img`-element.

*  add missing unit tests for image / no image cases on contact chips

Refs #4779. Closes #4851.

Author: Frank3K

src/components/chips/contact-chips.spec.js

@@ -60,6 +60,28 @@ describe('<md-contact-chips>', function() {
       expect(ctrl.highlightFlags).toEqual('i');
     });
 
+    it('renders an image element for contacts with an image property', function() {
+        scope.contacts.push(scope.allContacts[2]);
+
+        var element = buildChips(CONTACT_CHIPS_TEMPLATE);
+        var ctrl = element.controller('mdContactChips');
+        var chip = angular.element(element[0].querySelector('.md-chip-content'));
+
+        expect(chip.find('img').length).toBe(1);
+    });
+
+    it('does not render an image element for contacts without an image property', function() {
+        var noImageContact = scope.allContacts[2];
+        delete noImageContact.image;
+        scope.contacts.push(noImageContact);
+
+        var element = buildChips(CONTACT_CHIPS_TEMPLATE);
+        var ctrl = element.controller('mdContactChips');
+        var chip = angular.element(element[0].querySelector('.md-chip-content'));
+
+        expect(chip.find('img').length).toBe(0);
+    });
+
     describe('filtering selected items', function() {
       it('should filter', inject(function() {
         scope.querySearch = jasmine.createSpy('querySearch').and.callFake(function(q) {

src/components/chips/js/contactChipsDirective.js

@@ -69,7 +69,8 @@ var MD_CONTACT_CHIPS_TEMPLATE = '\
             <div class="md-contact-suggestion">\
               <img \
                   ng-src="{{item[$mdContactChipsCtrl.contactImage]}}"\
-                  alt="{{item[$mdContactChipsCtrl.contactName]}}" />\
+                  alt="{{item[$mdContactChipsCtrl.contactName]}}"\
+                  ng-if="item[$mdContactChipsCtrl.contactImage]" />\
               <span class="md-contact-name" md-highlight-text="$mdContactChipsCtrl.searchText"\
                     md-highlight-flags="{{$mdContactChipsCtrl.highlightFlags}}">\
                 {{item[$mdContactChipsCtrl.contactName]}}\
@@ -81,7 +82,8 @@ var MD_CONTACT_CHIPS_TEMPLATE = '\
             <div class="md-contact-avatar">\
               <img \
                   ng-src="{{$chip[$mdContactChipsCtrl.contactImage]}}"\
-                  alt="{{$chip[$mdContactChipsCtrl.contactName]}}" />\
+                  alt="{{$chip[$mdContactChipsCtrl.contactName]}}"\
+                  ng-if="$chip[$mdContactChipsCtrl.contactImage]" />\
             </div>\
             <div class="md-contact-name">\
               {{$chip[$mdContactChipsCtrl.contactName]}}\