81 lines
1.6 KiB
Plaintext
81 lines
1.6 KiB
Plaintext
---
|
|
import type { ImageMetadata } from "astro";
|
|
import { Picture as AstroImage } from "astro:assets";
|
|
import { generateThumbHash, getExifData } from "@helpers/image";
|
|
interface Props {
|
|
src: ImageMetadata & { fsPath?: string };
|
|
alt: string;
|
|
pictureClass?: string;
|
|
class?: string;
|
|
caption?: string;
|
|
hash?: boolean;
|
|
loader?: boolean;
|
|
maxWidth?: number;
|
|
}
|
|
|
|
async function checkImage(src:string){
|
|
try {
|
|
const res = await fetch(src);
|
|
if (res.ok) {
|
|
return src
|
|
}
|
|
return undefined
|
|
}catch(err){
|
|
console.log({src});
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
const {
|
|
src: image,
|
|
loader = true,
|
|
pictureClass = "",
|
|
hash = true,
|
|
alt,
|
|
maxWidth,
|
|
} = Astro.props;
|
|
|
|
let thumbhash = hash && image.fsPath ? await generateThumbHash(image) : "";
|
|
|
|
const imageSrc = await checkImage(image);
|
|
|
|
let exif = await getExifData(image);
|
|
|
|
const sizes = [
|
|
{
|
|
width: 240,
|
|
media: "(max-width: 360px)",
|
|
},
|
|
{
|
|
width: 540,
|
|
media: "(max-width: 720px)",
|
|
},
|
|
{
|
|
width: 720,
|
|
media: "(max-width: 1600px)",
|
|
},
|
|
{
|
|
width: image.width,
|
|
},
|
|
].filter((size) => !maxWidth || size.width <= maxWidth);
|
|
---
|
|
|
|
{imageSrc?
|
|
<AstroImage
|
|
src={imageSrc}
|
|
alt={alt}
|
|
data-thumbhash={thumbhash}
|
|
data-exif={JSON.stringify(exif)}
|
|
inferSize={true}
|
|
pictureAttributes={{
|
|
class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
|
|
}}
|
|
class={Astro.props.class}
|
|
widths={sizes.map((size) => size.width)}
|
|
sizes={sizes
|
|
.map((size) => `${size.media || "100vw"} ${size.width}px`)
|
|
.join(", ")}>
|
|
<slot />
|
|
</AstroImage>
|
|
:undefined }
|