Better handle if image fails to load

This commit is contained in:
Paulus Schoutsen 2016-02-20 00:09:44 -08:00
parent d753198910
commit 40ff847f2d
2 changed files with 25 additions and 2 deletions

View File

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

View File

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