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` { + src=${live(src)} + @load=${(ev: Event) => { dispatchMediaShowEvent(this, ev); }} @error=${() => {