From a9fb884fb5cb017e72f4a4cd4c5843e5f51a3cc6 Mon Sep 17 00:00:00 2001
From: soemyinthtel <soemyinthtel.github@gmail.com>
Date: Wed, 3 Dec 2025 14:38:38 +0630
Subject: [PATCH] fix: image fallback

- Fixed with adding image fallback at status avatar photo
- Allowed all images at next.config.js
---
 next.config.ts                             | 16 ++++++++++------
 src/components/organisms/status/Status.tsx |  9 +++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 8275045..4904c87 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,12 +3,16 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   output: "standalone",
   images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "*" // Allow all domains
-      }
-    ]
+    remotePatterns: process.env.NODE_ENV === 'production' 
+      ? [
+          { protocol: "https", hostname: "*" },
+          // Only specific trusted domains in production
+          // { protocol: "https", hostname: "yourdomain.com" }
+        ]
+      : [
+          { protocol: "https", hostname: "*" },
+          { protocol: "http", hostname: "*" } // Allow all in development
+        ]
   }
 };
 
diff --git a/src/components/organisms/status/Status.tsx b/src/components/organisms/status/Status.tsx
index a55744e..9b78ea8 100644
--- a/src/components/organisms/status/Status.tsx
+++ b/src/components/organisms/status/Status.tsx
@@ -22,6 +22,7 @@ import LoadingSpinner from "@/components/molecules/common/LoadingSpinner";
 import { useTipTapEditor } from "@/hooks/customs/useTipTapEditor";
 import Image from "next/image";
 import { MastodonCustomEmoji } from "../compose/tools/Emoji";
+import { FALLBACK_PREVIEW_IMAGE_URL } from "@/constants/url";
 
 type StatusProps = {
   status: StatusType;
@@ -195,16 +196,16 @@ const Status: React.FC<StatusProps> = ({
         >
           <div className="relative">
             <Image
-              src={data.account.avatar}
+              src={data?.account?.avatar || FALLBACK_PREVIEW_IMAGE_URL}
               alt="avatar photo"
               width={40}
               height={40}
-              className="w-10 aspect-square rounded-full bg-background"
+              className="w-10 aspect-square object-cover rounded-full bg-background"
             />
             {status.reblog && (
               <Image
-                className="w-6 aspect-square rounded-full absolute bottom-0 end-0 translate-2"
-                src={status?.account?.avatar}
+                className="w-6 aspect-square object-cover rounded-full absolute bottom-0 end-0 translate-2"
+                src={status?.account?.avatar || FALLBACK_PREVIEW_IMAGE_URL}
                 alt="avatar photo"
                 width={24}
                 height={24}