Updates

components/lib/layout/Img.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import React, { DetailedHTMLProps, ImgHTMLAttributes } from "react";
+import React, { DetailedHTMLProps, ImgHTMLAttributes, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type TWUIImageProps = DetailedHTMLProps<
@@ -14,13 +14,23 @@ export type TWUIImageProps = DetailedHTMLProps<
     fallbackImageSrc?: string;
     srcLight?: string;
     srcDark?: string;
+    imgErrSrc?: string;
+    imgErrComp?: ReactNode;
+    imgErrSrcLight?: string;
+    imgErrSrcDark?: string;
 };
 
 /**
  * # Image Component
  * @className twui-img
  */
-export default function Img({ ...props }: TWUIImageProps) {
+export default function Img({
+    imgErrSrc,
+    imgErrComp,
+    imgErrSrcDark,
+    imgErrSrcLight,
+    ...props
+}: TWUIImageProps) {
     const width = props.size || props.width;
     const height = props.size || props.height;
     const sizeRatio = width && height ? Number(width) / Number(height) : 1;
@@ -70,13 +80,16 @@ export default function Img({ ...props }: TWUIImageProps) {
 
     if (imageError) {
         return (
-            <img
-                loading="lazy"
-                {...interpolatedProps}
-                src={
-                    "https://static.datasquirel.com/images/user-images/user-2/castcord-image-preset_thumbnail.jpg"
-                }
-            />
+            imgErrComp || (
+                <img
+                    loading="lazy"
+                    {...interpolatedProps}
+                    src={
+                        imgErrSrc ||
+                        "https://static.datasquirel.com/images/user-images/user-2/castcord-image-preset_thumbnail.jpg"
+                    }
+                />
+            )
         );
     }