diff --git a/README.md b/README.md
index a0dbbe74..9ba445d3 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
@@ -1075,6 +1075,24 @@ overrides:
+### Refreshing a static image
+
+
+ Expand: Auto-refreshing a static image
+
+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
+```
+
+
## Card Refreshes
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`
+ ? html`
`
: ``}
${!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;
+
+ 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`
{
dispatchMediaShowEvent(this, e);
}}
- >`;
+ />`;
}
static get styles(): CSSResultGroup {