Better handle if image fails to load

src/cards/ha-camera-card.html

@@ -9,6 +9,7 @@
       font-size: 0px;
       border-radius: 2px;
       cursor: pointer;
+      min-height: 48px;
     }
     .camera-feed {
       width: 100%;
@@ -28,10 +29,19 @@
       font-weight: 500;
       line-height: 16px;
       color: white;
+      white-space: nowrap;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
     }
   </style>
   <template>
-    <img src='[[cameraFeedSrc]]' class='camera-feed'>
-    <div class='caption'>[[stateObj.entityDisplay]]</div>
+    <img src='[[cameraFeedSrc]]' class='camera-feed' hidden$='[[!imageLoaded]]'
+      on-load='imageLoadSuccess' on-error='imageLoadFail'>
+    <div class='caption'>
+      [[stateObj.entityDisplay]]
+      <template is='dom-if' if='[[!imageLoaded]]'>
+        (Error loading image)
+      </template>
+    </div>
   </template>
 </dom-module>

src/cards/ha-camera-card.js

@@ -18,6 +18,11 @@ export default new Polymer({
       type: String,
     },
 
+    imageLoaded: {
+      type: Boolean,
+      value: true,
+    },
+
     /**
      * The z-depth of the card, from 0-5.
      */
@@ -49,4 +54,12 @@ export default new Polymer({
     const time = (new Date()).getTime();
     this.cameraFeedSrc = `${stateObj.attributes.entity_picture}?time=${time}`;
   },
+
+  imageLoadSuccess() {
+    this.imageLoaded = true;
+  },
+
+  imageLoadFail() {
+    this.imageLoaded = false;
+  },
 });