Updates

components/layout/Img.tsx

@@ -1,5 +1,10 @@
 import _ from "lodash";
-import React, { DetailedHTMLProps, ImgHTMLAttributes, ReactNode } from "react";
+import React, {
+    type DetailedHTMLProps,
+    type ImgHTMLAttributes,
+    type ReactNode,
+    useEffect,
+} from "react";
 import { twMerge } from "tailwind-merge";
 
 export type TWUIImageProps = DetailedHTMLProps<
@@ -18,6 +23,7 @@ export type TWUIImageProps = DetailedHTMLProps<
     imgErrComp?: ReactNode;
     imgErrSrcLight?: string;
     imgErrSrcDark?: string;
+    checkImageFn?: () => Promise<boolean> | boolean;
 };
 
 /**
@@ -29,6 +35,7 @@ export default function Img({
     imgErrComp,
     imgErrSrcDark,
     imgErrSrcLight,
+    checkImageFn,
     ...props
 }: TWUIImageProps) {
     const width = props.size || props.width;
@@ -58,7 +65,7 @@ export default function Img({
                 ? "absolute top-0 left-0 w-full h-full object-cover z-0"
                 : "",
             "twui-img",
-            props.className
+            props.className,
         ),
         onError: (e) => {
             if (props.fallbackImageSrc) {
@@ -78,6 +85,17 @@ export default function Img({
         },
     };
 
+    useEffect(() => {
+        if (checkImageFn) {
+            (async () => {
+                const does_image_exist = await checkImageFn();
+                if (!does_image_exist) {
+                    setImageError(true);
+                }
+            })();
+        }
+    }, []);
+
     if (imageError) {
         return (
             imgErrComp || (
@@ -101,7 +119,7 @@ export default function Img({
                     {...interpolatedProps}
                     className={twMerge(
                         "hidden dark:block",
-                        interpolatedProps.className
+                        interpolatedProps.className,
                     )}
                     src={props.srcDark}
                     onError={(e) => {
@@ -114,7 +132,7 @@ export default function Img({
                     {...interpolatedProps}
                     className={twMerge(
                         "block dark:hidden",
-                        interpolatedProps.className
+                        interpolatedProps.className,
                     )}
                     src={props.srcLight}
                     onError={(e) => {