Add safe images and placeholder

Author: nikoshell

public/images/placeholder.png

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import type { CollectionEntry } from "astro:content";
-import { Image } from "astro:assets";
+import Image from "@ui/SafeImage.astro";
 import Section from "@ui/Section.astro"
 
 const allSpeakers = await getCollection("speakers");

src/components/sections/speakers.astro

@@ -0,0 +1,53 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  src: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  placeholder?: string;
+  [key: string]: any;
+}
+
+const {
+  src,
+  alt = '',
+  width,
+  height,
+  placeholder = '/images/placeholder.jpg',
+  ...rest
+} = Astro.props;
+
+let imageSrc = src;
+let isValid = false;
+
+try {
+  const res = await fetch(src);
+  if (res.ok) {
+    isValid = true;
+  } else {
+    imageSrc = placeholder;
+    const fallbackRes = await fetch(placeholder);
+    isValid = fallbackRes.ok;
+  }
+} catch {
+  try {
+    imageSrc = placeholder;
+    const fallbackRes = await fetch(placeholder);
+    isValid = fallbackRes.ok;
+  } catch {
+    isValid = false;
+  }
+}
+---
+
+{isValid ? (
+  <Image
+    src={imageSrc}
+    alt={alt}
+    width={width}
+    height={height}
+    {...rest}
+  />
+) : null}

src/components/ui/SafeImage.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+  src: string;
+  alt?: string;
+  placeholder?: string;
+  class?: string;
+  formats?: ("webp" | "jpeg")[];
+  widths?: number[];
+  [key: string]: any;
+}
+
+const {
+  src,
+  alt = '',
+  placeholder = '/images/placeholder.jpg',
+  class: className,
+  formats,
+  widths,
+  ...rest
+} = Astro.props;
+
+let imageSrc = src;
+let isValid = false;
+
+async function validate(url: string): Promise<boolean> {
+  try {
+    const res = await fetch(url, { method: 'HEAD' });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+if (await validate(src)) {
+  isValid = true;
+} else if (await validate(placeholder)) {
+  imageSrc = placeholder;
+  isValid = true;
+}
+---
+
+{isValid ? (
+  <picture>
+    {imageSrc.endsWith('.webp') && <source srcset={imageSrc} type="image/webp" />}
+    <img
+      src={imageSrc}
+      alt={alt}
+      class={className}
+      loading="lazy"
+      decoding="async"
+      {...rest}
+    />
+  </picture>
+) : null}