From b4825aafc220a79de330b11763801b8a425f5c47 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 24 Jul 2022 20:03:43 -0700
Subject: [PATCH] Restore correct image after browser tab becomes visible.

---
 src/components/image.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/image.ts b/src/components/image.ts
index a37f5ddd..5960bf8c 100644
--- a/src/components/image.ts
+++ b/src/components/image.ts
@@ -9,6 +9,7 @@ import {
   unsafeCSS
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { CachedValueController } from '../cached-value-controller.js';
 import defaultImage from '../images/frigate-bird-in-sky.jpg';
@@ -216,11 +217,13 @@ export class FrigateCardImage extends LitElement {
 
   protected render(): TemplateResult | void {
     const src = this._cachedValueController?.value;
+    // Note the use of live() below to ensure the update will restore the image
+    // src if it's been changed via _forceSafeImage().
     return src
       ? html` <img
           ${ref(this._refImage)}
-          src=${src}
-          @load=${(ev) => {
+          src=${live(src)}
+          @load=${(ev: Event) => {
             dispatchMediaShowEvent(this, ev);
           }}
           @error=${() => {