fix: Add remotePatterns to next.config.js and added width and height …

…to profile image
compsci-adl · Jan 15, 2024 · 7ceb23d · 7ceb23d
1 parent fcef617
commit 7ceb23d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'img.clerk.com',
+      },
+    ],
+  },
+};
 
 module.exports = nextConfig;
diff --git a/src/components/UserButton.tsx b/src/components/UserButton.tsx
@@ -23,7 +23,9 @@ export default function UserButton() {
             <div className="flex relative w-11 border-2 border-black gap-y-2">
                 <button onClick={handleButtonClick}>
                     {/* Display user's profile icon */}
-                    {user && user.imageUrl && <Image src={user.imageUrl} alt="Profile" />}
+                    {user && user.imageUrl && (
+                        <Image src={user.imageUrl} alt="Profile" width={100} height={100} />
+                    )}
                 </button>
 
                 {/* Popup menu */}