mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +00:00
Better handle if image fails to load
This commit is contained in:
parent
d753198910
commit
40ff847f2d
@ -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>
|
||||||
|
@ -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;
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user