Add image loader (#17)

imageLoader.ts

@@ -0,0 +1,16 @@
+/**
+ * Custom image loader to replace built-in which doesn't work in export mode
+ * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports#image-optimization
+ */
+export default function cloudinaryLoader({
+    src,
+    width,
+    quality,
+}: {
+    src: string;
+    width: number;
+    quality?: number;
+}) {
+    const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`];
+    return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}${src}`;
+}

next.config.js

@@ -4,7 +4,10 @@ module.exports = {
     distDir: 'build',
     output: 'export',
     cleanDistDir: true,
-    images: {unoptimized: true},
+    images: {
+        loader: 'custom',
+        loaderFile: './imageLoader.ts',
+    },
     // Set to deploy at GitHub pages or other non-index page url
     basePath: '/next-card',
     // Required to compile vCard

src/components/Background/Background.tsx

@@ -25,7 +25,7 @@ const getBgValue = (propBg: Config['background'], paramBg?: Config['background']
     }
     return propBg;
 };
-//blurry
+
 export const Background: FC<Props> = ({children, background = config.background}) => {
     const searchParams = useSearchParams();