fix: explicitly cache images to prevent unexpected behavior

This commit is contained in:
Elias Schneider
2025-06-16 15:59:14 +02:00
parent 4ed312251e
commit 2e5d268798
17 changed files with 142 additions and 58 deletions

View File

@@ -1,6 +1,7 @@
<script lang="ts">
import Button from '$lib/components/ui/button/button.svelte';
import { m } from '$lib/paraglide/messages';
import { cachedApplicationLogo, cachedBackgroundImage } from '$lib/utils/cached-image-util';
import ApplicationImage from './application-image.svelte';
let {
@@ -34,7 +35,7 @@
imageClass="size-32"
label={m.light_mode_logo()}
bind:image={logoLight}
imageURL="/api/application-configuration/logo?light=true"
imageURL={cachedApplicationLogo.getUrl(true)}
forceColorScheme="light"
/>
<ApplicationImage
@@ -42,7 +43,7 @@
imageClass="size-32"
label={m.dark_mode_logo()}
bind:image={logoDark}
imageURL="/api/application-configuration/logo?light=false"
imageURL={cachedApplicationLogo.getUrl(false)}
forceColorScheme="dark"
/>
<ApplicationImage
@@ -50,7 +51,7 @@
imageClass="h-[350px] max-w-[500px]"
label={m.background_image()}
bind:image={backgroundImage}
imageURL="/api/application-configuration/background-image"
imageURL={cachedBackgroundImage.getUrl()}
/>
</div>
<div class="flex justify-end">

View File

@@ -7,6 +7,7 @@
import Label from '$lib/components/ui/label/label.svelte';
import { m } from '$lib/paraglide/messages';
import type { OidcClient, OidcClientCreateWithLogo } from '$lib/types/oidc.type';
import { cachedOidcClientLogo } from '$lib/utils/cached-image-util';
import { preventDefault } from '$lib/utils/event-util';
import { createForm } from '$lib/utils/form-util';
import { cn } from '$lib/utils/style';
@@ -28,7 +29,7 @@
let showAdvancedOptions = $state(false);
let logo = $state<File | null | undefined>();
let logoDataURL: string | null = $state(
existingClient?.hasLogo ? `/api/oidc/clients/${existingClient!.id}/logo` : null
existingClient?.hasLogo ? cachedOidcClientLogo.getUrl(existingClient!.id) : null
);
const client = {

View File

@@ -8,6 +8,7 @@
import OIDCService from '$lib/services/oidc-service';
import type { OidcClient, OidcClientWithAllowedUserGroupsCount } from '$lib/types/oidc.type';
import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
import { cachedOidcClientLogo } from '$lib/utils/cached-image-util';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucidePencil, LucideTrash } from '@lucide/svelte';
import { toast } from 'svelte-sonner';
@@ -59,7 +60,7 @@
{#if item.hasLogo}
<ImageBox
class="min-h-8 min-w-8"
src={`/api/oidc/clients/${item.id}/logo`}
src={cachedOidcClientLogo.getUrl(item.id)}
alt={m.name_logo({ name: item.name })}
/>
{/if}