diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts index 6c2b0172..913a8005 100644 --- a/src/components/thumbnail.ts +++ b/src/components/thumbnail.ts @@ -57,6 +57,10 @@ export class FrigateCardThumbnailFeatureEvent extends LitElement { return new Promise((resolve, reject) => { //eslint-disable-next-line @typescript-eslint/no-non-null-assertion this.hass!.fetchWithAuth(thumbnail) + // Since we are fetching with an authorization header, we cannot just put the + // URL directly into the document; we need to embed the image. We could do this + // using blob URLs, but then we would need to keep track of them in order to + // release them properly. Instead, we embed the thumbnail using base64. .then((response) => response.blob()) .then((blob) => { const reader = new FileReader();