diff --git a/src/ui/src/components/shared/SharedImgWithFallback.spec.ts b/src/ui/src/components/shared/SharedImgWithFallback.spec.ts index 8cad0850..846fc944 100644 --- a/src/ui/src/components/shared/SharedImgWithFallback.spec.ts +++ b/src/ui/src/components/shared/SharedImgWithFallback.spec.ts @@ -13,7 +13,7 @@ describe("SharedImgWithFallback", () => { global.fetch = fetch; }); - it("should use the second image", async () => { + it("should use the last image because the first two are not valid", async () => { fetch .mockRejectedValueOnce(new Error()) .mockResolvedValueOnce({ diff --git a/src/ui/src/components/shared/SharedImgWithFallback.vue b/src/ui/src/components/shared/SharedImgWithFallback.vue index 51b8504f..d4b0d7b4 100644 --- a/src/ui/src/components/shared/SharedImgWithFallback.vue +++ b/src/ui/src/components/shared/SharedImgWithFallback.vue @@ -21,7 +21,7 @@ watch( for (const url of urls) { const contentType = await fetchAssetContentType(url); - // ensure that the content type is not HTML (the server can responds with a default page) + // ensure that the content type is valid and not HTML (the server can responds with a default HTML page) if (!contentType || contentType === "text/html") continue; return (src.value = url); } diff --git a/src/ui/src/composables/useAssetContentType.spec.ts b/src/ui/src/composables/useAssetContentType.spec.ts index 71b42160..1c9cbda7 100644 --- a/src/ui/src/composables/useAssetContentType.spec.ts +++ b/src/ui/src/composables/useAssetContentType.spec.ts @@ -18,7 +18,7 @@ describe(useAssetContentType.name, () => { fetch.mockRejectedValue(new Error()); const { fetchAssetContentType } = useAssetContentType(); - expect(await fetchAssetContentType("https://test.com")).toBe(false); + expect(await fetchAssetContentType("https://test.com")).toBeUndefined(); expect(fetch).toHaveBeenCalledOnce(); }); diff --git a/src/ui/src/composables/useAssetContentType.ts b/src/ui/src/composables/useAssetContentType.ts index 70327638..f8a993f5 100644 --- a/src/ui/src/composables/useAssetContentType.ts +++ b/src/ui/src/composables/useAssetContentType.ts @@ -1,4 +1,4 @@ -const cacheUrlContentType = new Map>(); +const cacheUrlContentType = new Map>(); /** * Do an HTTP `HEAD` call to get the `Content-Type` of an URL. Handle parrallel calls and use a cache mechanism. @@ -11,10 +11,10 @@ export function useAssetContentType() { // we store the promise instead of the result to handle concurent calls const promise = fetch(url, { method: "HEAD" }) .then((r) => { - if (!r.ok) return false; - return r.headers.get("Content-Type") ?? false; + if (!r.ok) return undefined; + return r.headers.get("Content-Type") || undefined; }) - .catch(() => false); + .catch(() => undefined); cacheUrlContentType.set(url, promise);