ImBIOS
commented
2 weeks ago If I commented OptimizedPicture.astro
---
import { Picture } from "astro:assets";
interface Props {
src: string;
alt: string;
widths?: number[];
sizes?: string;
class?: string;
loading?: "lazy" | "eager";
fetchpriority?: "high" | "low" | "auto";
}
const {
src,
alt,
widths = [320, 640, 960, 1280, 1600, 1960],
sizes = `(max-width: 320px) 320px,
(max-width: 640px) 640px,
(max-width: 960px) 960px,
(max-width: 1280px) 1280px,
(max-width: 1600px) 1600px,
1960px`,
class: className = "mx-auto w-full max-w-full rounded-lg",
loading = "lazy",
fetchpriority = "auto",
} = Astro.props;
---
<!-- <Picture
src={src}
alt={alt}
widths={widths}
sizes={sizes}
formats={["avif"]}
fallbackFormat="avif"
class={className}
loading={loading}
fetchpriority={fetchpriority}
inferSize
/> -->The web resulted like this:
It's weird because, I believe this repo has several example pages, but the only listed in astro dev is only one
I'm sure I can open all the images in my browser.
Env:
Logs:
Verbose logs: