Peter Meier
45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
---
|
|
/**
|
|
* RustyImage: Bild-URL über RustyCMS /api/transform laden, in public speichern, lokal ausliefern.
|
|
* Nutzung: <RustyImage src={url} width={34} height={50} alt="..." />
|
|
* Unterstützt alle API-Transformationen: width, height, ar, fit, format, quality.
|
|
* Im Svelte-Kontext: RustyImage.svelte verwenden und dort den bereits aufgelösten Pfad als src übergeben.
|
|
*/
|
|
import { ensureTransformedImage } from '../lib/rusty-image';
|
|
|
|
interface Props {
|
|
/** Externe Bild-URL (z. B. Contentful). */
|
|
src: string;
|
|
width?: number;
|
|
height?: number;
|
|
/** Aspect ratio, z. B. "1:1" oder "16:9". */
|
|
ar?: string;
|
|
fit?: 'fill' | 'contain' | 'cover';
|
|
format?: 'jpeg' | 'png' | 'webp' | 'avif';
|
|
quality?: number;
|
|
alt?: string;
|
|
class?: string;
|
|
loading?: 'lazy' | 'eager';
|
|
}
|
|
|
|
const { src, width, height, ar, fit, format, quality, alt = '', class: className = '', loading = 'lazy' } = Astro.props;
|
|
|
|
const resolvedSrc = await ensureTransformedImage(src, {
|
|
width,
|
|
height,
|
|
ar,
|
|
fit,
|
|
format,
|
|
quality,
|
|
});
|
|
---
|
|
|
|
<img
|
|
src={resolvedSrc}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
class={className}
|
|
loading={loading}
|
|
/>
|