mirror of
https://github.com/immich-app/immich.git
synced 2026-05-18 03:10:24 +03:00
Daniel Dietzler
34 lines
1.0 KiB
Svelte
34 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { cleanClass } from '$lib';
|
|
import { Icon } from '@immich/ui';
|
|
import { mdiImageBrokenVariant } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
import type { ClassValue } from 'svelte/elements';
|
|
|
|
interface Props {
|
|
class?: ClassValue;
|
|
hideMessage?: boolean;
|
|
width?: string | undefined;
|
|
height?: string | undefined;
|
|
}
|
|
|
|
let { class: className, hideMessage = false, width = undefined, height = undefined }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
data-broken-asset
|
|
class={cleanClass(
|
|
'@container flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
|
|
className,
|
|
)}
|
|
style:width
|
|
style:height
|
|
>
|
|
<div class="hidden @min-[75px]:block">
|
|
<Icon icon={mdiImageBrokenVariant} size="7em" class="min-h-6 max-w-full min-w-6" />
|
|
</div>
|
|
{#if !hideMessage}
|
|
<span class="text-center text-xs @min-[100px]:text-sm @min-[150px]:text-base">{$t('error_loading_image')}</span>
|
|
{/if}
|
|
</div>
|