fix: guest profile picture fallback not working

src/app/profile/[id]/page.tsx

@@ -47,7 +47,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 			type: "profile",
 			title: `${user.name} (@${user.username}) - TomodachiShare`,
 			description: `View ${user.name}'s profile on TomodachiShare. Creator of ${user._count.miis} Miis. Member since ${joinDate}.`,
-			images: [user.image ?? "/guest.svg"],
+			images: [user.image ?? "/guest.webp"],
 			username: user.username,
 			firstName: user.name,
 		},
@@ -55,7 +55,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 			card: "summary",
 			title: `${user.name} (@${user.username}) - TomodachiShare`,
 			description: `View ${user.name}'s profile on TomodachiShare. Creator of ${user._count.miis} Miis. Member since ${joinDate}.`,
-			images: [user.image ?? "/guest.svg"],
+			images: [user.image ?? "/guest.webp"],
 			creator: user.username!,
 		},
 		alternates: {

src/components/admin/user-management.tsx

@@ -2,12 +2,12 @@
 
 "use client";
 
-import Image from "next/image";
 import { useState } from "react";
 
 import { Icon } from "@iconify/react";
 import { Prisma, PunishmentType } from "@prisma/client";
 
+import ProfilePicture from "../profile-picture";
 import SubmitButton from "../submit-button";
 import PunishmentDeletionDialog from "./punishment-deletion-dialog";
 
@@ -112,7 +112,7 @@ export default function Punishments() {
 				<div className="grid grid-cols-2 gap-2 mt-2 max-lg:grid-cols-1">
 					<div className="p-4 bg-orange-50 border border-orange-300 rounded-md shadow-sm">
 						<div className="flex gap-1">
-							<Image src={user.image} width={96} height={96} alt="Profile picture" className="rounded-full border-2 border-orange-400" />
+							<ProfilePicture src={user.image} width={96} height={96} className="rounded-full border-2 border-orange-400" />
 							<div className="p-2 flex flex-col">
 								<p className="text-xl font-bold">{user.name}</p>
 								<p className="text-black/60 text-sm font-medium">@{user.username}</p>

src/components/profile-information.tsx

@@ -1,10 +1,11 @@
 import Link from "next/link";
-import Image from "next/image";
 import { Icon } from "@iconify/react";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
+import ProfilePicture from "./profile-picture";
+
 interface Props {
 	userId?: number;
 	page?: "settings" | "likes";
@@ -28,13 +29,7 @@ export default async function ProfileInformation({ userId, page }: Props) {
 			<div className="flex w-full gap-4 overflow-x-scroll">
 				{/* Profile picture */}
 				<Link href={`/profile/${user.id}`} className="size-28 aspect-square">
-					<Image
+					<ProfilePicture src={user.image ?? "/guest.webp"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
-						src={user.image ?? "/guest.webp"}
-						alt="profile picture"
-						width={128}
-						height={128}
-						className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center"
-					/>
 				</Link>
 				{/* User information */}
 				<div className="flex flex-col w-full relative py-3">

src/components/profile-picture.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import Image, { ImageProps } from "next/image";
+import { useState } from "react";
+
+export default function ProfilePicture(props: Partial<ImageProps>) {
+	const { src, ...rest } = props;
+	const [imgSrc, setImgSrc] = useState(src);
+
+	return <Image {...rest} src={imgSrc || "/guest.webp"} alt={"profile picture"} width={128} height={128} onError={() => setImgSrc("/guest.webp")} />;
+}

src/components/report/user-form.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import Image from "next/image";
 import { redirect } from "next/navigation";
 
 import { useState } from "react";
 import { ReportReason, User } from "@prisma/client";
 
+import ProfilePicture from "../profile-picture";
 import ReasonSelector from "./reason-selector";
 import SubmitButton from "../submit-button";
 
@@ -43,13 +43,7 @@ export default function ReportUserForm({ user }: Props) {
 			<hr className="border-zinc-300" />
 
 			<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
-				<Image
+				<ProfilePicture src={user.image ?? "/guest.webp"} width={96} height={96} className="aspect-square rounded-full border-2 border-orange-400" />
-					src={user.image ?? "/missing.svg"}
-					alt="profile picture"
-					width={96}
-					height={96}
-					className="aspect-square rounded-full border-2 border-orange-400"
-				/>
 				<div className="flex flex-col justify-center">
 					<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
 					<p className="text-sm font-bold overflow-hidden text-ellipsis">@{user.username}</p>