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` + ? 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 {