diff --git a/src/components/tile/ha-tile-image.ts b/src/components/tile/ha-tile-image.ts
new file mode 100644
index 0000000000..0990749412
--- /dev/null
+++ b/src/components/tile/ha-tile-image.ts
@@ -0,0 +1,41 @@
+import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-tile-image")
+export class HaTileImage extends LitElement {
+ @property() public imageUrl?: string;
+
+ protected render(): TemplateResult {
+ return html`
+
+ ${this.imageUrl ? html`

` : null}
+
+ `;
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ .image {
+ position: relative;
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ display: flex;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ }
+ .image img {
+ width: 100%;
+ height: 100%;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-tile-image": HaTileImage;
+ }
+}
diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 8cf23befbb..ebb188a17f 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -1,4 +1,5 @@
import { mdiHelp } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
@@ -11,7 +12,9 @@ import { stateColorCss } from "../../../common/entity/state_color";
import { stateIconPath } from "../../../common/entity/state_icon_path";
import "../../../components/ha-card";
import "../../../components/tile/ha-tile-icon";
+import "../../../components/tile/ha-tile-image";
import "../../../components/tile/ha-tile-info";
+import { cameraUrlWithWidthHeight } from "../../../data/camera";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive";
@@ -87,6 +90,21 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
handleAction(this, this.hass!, config, "tap");
}
+ private _getImageUrl(entity: HassEntity): string | undefined {
+ const entityPicture =
+ entity.attributes.entity_picture_local ||
+ entity.attributes.entity_picture;
+
+ if (!entityPicture) return undefined;
+
+ let imageUrl = this.hass!.hassUrl(entityPicture);
+ if (computeDomain(entity.entity_id) === "camera") {
+ imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
+ }
+
+ return imageUrl;
+ }
+
render() {
if (!this._config || !this.hass) {
return html``;
@@ -126,17 +144,35 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
: stateColorCss(entity),
};
+ const imageUrl = this._config.show_entity_picture
+ ? this._getImageUrl(entity)
+ : undefined;
+
return html`
-
+ ${imageUrl
+ ? html`
+
+ `
+ : html`
+
+ `}