Area card gallery updates (#11324)

gallery/src/pages/lovelace/area-card.ts

@@ -46,7 +46,6 @@ const CONFIGS = [
     config: `
 - type: area
   area: bedroom
-  image: "/images/bed.png"
     `,
   },
   {
@@ -54,7 +53,6 @@ const CONFIGS = [
     config: `
 - type: area
   area: living_room
-  image: "/images/living_room.png"
     `,
   },
   {
@@ -62,7 +60,6 @@ const CONFIGS = [
     config: `
 - type: area
   area: office
-  image: "/images/office.jpg"
     `,
   },
   {
@@ -70,7 +67,6 @@ const CONFIGS = [
     config: `
 - type: area
   area: kitchen
-  image: "/images/kitchen.png"
     `,
   },
 ];
@@ -93,18 +89,22 @@ class DemoArea extends LitElement {
       {
         name: "Bedroom",
         area_id: "bedroom",
+        picture: "/images/bed.png",
       },
       {
         name: "Living Room",
         area_id: "living_room",
+        picture: "/images/living_room.png",
       },
       {
         name: "Office",
         area_id: "office",
+        picture: "/images/office.jpg",
       },
       {
         name: "Second Office",
         area_id: "kitchen",
+        picture: "/images/kitchen.png",
       },
     ]);
     hass.mockWS("config/device_registry/list", () => []);

src/panels/lovelace/cards/hui-area-card.ts

@@ -31,6 +31,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
+import "../components/hui-image";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -265,7 +266,7 @@ export class HuiAreaCard
 
     if (
       changedProps.has("_devicesInArea") ||
-      changedProps.has("_area") ||
+      changedProps.has("_areas") ||
       changedProps.has("_entities")
     ) {
       return true;
@@ -372,9 +373,7 @@ export class HuiAreaCard
           ? html`<hui-image
               .config=${this._config}
               .hass=${this.hass}
-              .image=${area.picture
+              .image=${area.picture ? area.picture : undefined}
-                ? this.hass.hassUrl(area.picture)
-                : undefined}
               .cameraImage=${cameraEntityId}
               aspectRatio="16:9"
             ></hui-image>`