From 49d299e8f301c4d73d327370f009895781c18359 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 17 Jan 2022 16:56:51 -0800
Subject: [PATCH 1/2] Ensure static images refresh.

---
 README.md               |  2 +-
 src/card.ts             |  5 ++++-
 src/components/image.ts | 20 +++++++++++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index a0dbbe74..6cc0f9fc 100644
--- a/README.md
+++ b/README.md
@@ -336,7 +336,7 @@ image:
 
 | Option | Default | Overridable | Description |
 | - | - | - | - |
-| `src` | | :heavy_multiplication_x: | [embedded image](https://www.flickr.com/photos/dianasch/47543120431) | A static image URL for use with the `image` [view](#views).|
+| `src` | | :heavy_multiplication_x: | [embedded image](https://www.flickr.com/photos/dianasch/47543120431) | A static image URL for use with the `image` [view](#views). Note that a `t=[timestsamp]` query parameter will be automatically added to this URL such that the image will not be cached by the browser. |
 | `actions` | | :heavy_multiplication_x: | Actions to use for the `image` view. See [actions](#actions) below.|
 
 ### Dimension Options
diff --git a/src/card.ts b/src/card.ts
index 5dd5079d..c9a1bd87 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1184,7 +1184,10 @@ export class FrigateCard extends LitElement {
 
     return html`
       ${!this._message && this._view.is('image')
-        ? html` <frigate-card-image .imageConfig=${this._getConfig().image}>
+        ? html` <frigate-card-image
+            .imageConfig=${this._getConfig().image}
+            .view=${this._view}
+          >
           </frigate-card-image>`
         : ``}
       ${!this._message && this._view.isGalleryView()
diff --git a/src/components/image.ts b/src/components/image.ts
index 979a7aa6..5f4f5e97 100644
--- a/src/components/image.ts
+++ b/src/components/image.ts
@@ -4,22 +4,36 @@ import { customElement, property } from 'lit/decorators.js';
 import { dispatchMediaShowEvent } from '../common.js';
 
 import type { ImageViewConfig } from '../types.js';
-import defaultImage from '../images/frigate-bird-in-sky.jpg'
+import defaultImage from '../images/frigate-bird-in-sky.jpg';
 
 import imageStyle from '../scss/image.scss';
+import { View } from '../view.js';
 
 @customElement('frigate-card-image')
 export class FrigateCardImage extends LitElement {
   @property({ attribute: false })
   protected imageConfig?: ImageViewConfig;
 
+  // A new view should trigger an image re-render.
+  @property({ attribute: false })
+  protected view?: Readonly<View>;
+
+  protected _getImageSource(): string {
+    if (this.imageConfig?.src) {
+      const url = new URL(this.imageConfig.src);
+      url.searchParams.append('t', String(Date.now()));
+      return url.toString();
+    }
+    return defaultImage;
+  }
+
   protected render(): TemplateResult | void {
     return html` <img
-      src=${this.imageConfig?.src || defaultImage}
+      src=${this._getImageSource()}
       @load=${(e) => {
         dispatchMediaShowEvent(this, e);
       }}
-    >`;
+    />`;
   }
 
   static get styles(): CSSResultGroup {

From c891fca7aae5cd89892049d46f7e6d03674b04a3 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 17 Jan 2022 17:02:02 -0800
Subject: [PATCH 2/2] Add README example.

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index 6cc0f9fc..9ba445d3 100644
--- a/README.md
+++ b/README.md
@@ -1075,6 +1075,24 @@ overrides:
 
 </details>
 
+### Refreshing a static image
+
+<details>
+  <summary>Expand: Auto-refreshing a static image</summary>
+
+This example fetches a static image every 10 seconds (in this case the latest image saved on the Frigate server for a given camera).
+
+```yaml
+[...]
+view:
+  default: image
+  timeout: 10
+  update_force: true
+image:
+  src: https://my-friage-server/api/living_room/latest.jpg
+```
+</details>
+
 <a name="card-updates"></a>
 
 ## Card Refreshes