feat: use nextjs image for all domains

next.config.js

@@ -47,7 +47,8 @@ module.exports = withBundleAnalyzer(
 
     images: {
       dangerouslyAllowSVG: true,
-      domains: ["4everland.xyz"],
+      contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+      remotePatterns: [{ hostname: "**" }],
     },
   }),
 )

src/components/site/PostFooter.tsx

@@ -229,7 +229,7 @@ export const PostFooter: React.FC<{
               ?.map((like: any, index) => (
                 <li className="inline-block" key={index}>
                   <Avatar
-                    className="align-middle border-2 border-white"
+                    className="relative align-middle border-2 border-white"
                     images={
                       like.fromCharacter?.metadata?.content?.avatars || []
                     }
@@ -240,7 +240,7 @@ export const PostFooter: React.FC<{
               ))}
             {(likes.data?.count || 0) > 3 && (
               <li className="inline-block">
-                <div className="align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
+                <div className="relative align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
                   +{likes.data!.count - 3}
                 </div>
               </li>
@@ -272,7 +272,7 @@ export const PostFooter: React.FC<{
               .map((mint: any, index) => (
                 <li className="inline-block" key={index}>
                   <Avatar
-                    className="align-middle border-2 border-white"
+                    className="relative align-middle border-2 border-white"
                     images={mint.character?.metadata?.content?.avatars || []}
                     name={mint.character?.metadata?.content?.name}
                     size={40}
@@ -281,7 +281,7 @@ export const PostFooter: React.FC<{
               ))}
             {(mints.data?.count || 0) > 3 && (
               <li className="inline-block">
-                <div className="align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
+                <div className="relative align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
                   +{mints.data!.count - 3}
                 </div>
               </li>

src/components/site/SiteHome.tsx

@@ -63,6 +63,8 @@ export const SiteHome: React.FC<{
                         className="object-cover rounded w-24 h-24"
                         alt="cover"
                         layout="fill"
+                        width={96}
+                        height={96}
                         src={post.cover}
                       ></Image>
                     </div>

src/components/ui/Image.tsx

@@ -15,49 +15,33 @@ export const Image: React.FC<
 > = ({ layout, className, alt, src, width, height, ...props }) => {
   src = toIPFS(src)
   const [paddingTop, setPaddingTop] = React.useState("0")
+  const autoSize = !width && !width && !layout
 
   return (
-    <>
-      {isIpfsUrl(src) ? (
-        <span
-          className={clsx(
-            "relative inline-flex justify-center",
-            !width && !width && !layout ? "w-full h-full" : "",
-          )}
-          style={{ paddingTop }}
-        >
-          <NextImage
-            {...props}
-            src={toGateway(src, {
-              forceFallback: true,
-            })}
-            className={className}
-            alt={alt}
-            width={width}
-            height={height}
-            layout={!width && !height ? "fill" : layout}
-            onLoad={({ target }) => {
-              if (!width && !width && !layout) {
-                const { naturalWidth, naturalHeight } =
-                  target as HTMLImageElement
-                setPaddingTop(
-                  `calc(100% / (${naturalWidth} / ${naturalHeight})`,
-                )
-              }
-            }}
-          />
-        </span>
-      ) : (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          {...props}
-          src={toGateway(src, {
-            forceFallback: true,
-          })}
-          className={className}
-          alt={alt}
-        />
+    <span
+      className={clsx(
+        "inline-flex justify-center",
+        autoSize ? "relative w-full h-full" : "",
       )}
-    </>
+      style={autoSize ? { paddingTop } : {}}
+    >
+      <NextImage
+        {...props}
+        src={toGateway(src, {
+          forceFallback: true,
+        })}
+        className={className}
+        alt={alt}
+        width={width}
+        height={height}
+        layout={autoSize ? "fill" : layout}
+        onLoad={({ target }) => {
+          if (autoSize) {
+            const { naturalWidth, naturalHeight } = target as HTMLImageElement
+            setPaddingTop(`calc(100% / (${naturalWidth} / ${naturalHeight})`)
+          }
+        }}
+      />
+    </span>
   )
 }