feat: component to handle broken images (#1758)

* fix: fallback component for broken images

* fix: fallback component for broken images

Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>

components/FallbackImage.js

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import Image from "next/image";
+
+export const FallbackImage = ({ src, alt, fallback = "A A", ...rest }) => {
+  const [imgSrc, setImgSrc] = useState(src);
+  const fallbackUrl = `https://avatars.dicebear.com/api/initials/${fallback}.svg`;
+
+  return (
+    <Image
+      {...rest}
+      alt={alt}
+      src={imgSrc ? imgSrc : fallbackUrl}
+      onError={() => setImgSrc(fallbackUrl)}
+    />
+  );
+};

components/user/UserPreview.js

@@ -1,18 +1,19 @@
-import Image from "next/image";
 import Link from "next/link";
+import { FallbackImage } from "../FallbackImage";
 
 export default function UserPreview({ profile }) {
   return (
     <Link href={`/${profile.username}`}>
       <a className="flex flex-col gap-x-6 rounded md:rounded-full md:flex-row border-2 border-gray-200 hover:border-gray-500 p-4 my-2">
         <div className="flex items-center gap-5">
           <div className="min-w-[5rem]">
-            <Image
+            <FallbackImage
               src={profile.avatar}
               alt={`Profile picture of ${profile.name}`}
               width={80}
               height={80}
               className="rounded-full"
+              fallback={profile.name}
             />
           </div>
           <h3 className="text-2xl font-bold md:hidden">

next.config.js

@@ -8,6 +8,7 @@ const nextConfig = {
       "avatars.githubusercontent.com",
       "user-images.githubusercontent.com",
       "cdn.nhcarrigan.com",
+      "avatars.dicebear.com",
     ],
   },
 };

pages/[username].js

@@ -1,12 +1,11 @@
 import Head from "next/head";
-import Image from "next/image";
-
 import app from "../config/app.json";
 import SingleLayout from "../components/layouts/SingleLayout";
 import MultiLayout from "../components/layouts/MultiLayout";
 import singleUser from "../config/user.json";
 import UserLink from "../components/user/UserLink";
 import UserMilestone from "../components/user/UserMilestone";
+import { FallbackImage } from "../components/FallbackImage";
 import EventPreview from "../components/events/EventPreview";
 
 export async function getServerSideProps(context) {
@@ -37,11 +36,12 @@ export default function User({ data }) {
 
       <div className="mx-auto container px-6 mt-6">
         <div className="flex justify-center gap-x-6">
-          <Image
+          <FallbackImage
             src={data.avatar}
             alt={`Profile picture of ${data.name}`}
             width={120}
             height={120}
+            fallback={data.name}
             className="rounded-full"
           />
           <div className="flex flex-col self-center">