fix: image loading issues

Author: JeelDobariya38

website/next.config.ts

@@ -3,9 +3,12 @@ import type { NextConfig } from "next";
 const isProd = process.env.NODE_ENV === "production";
 const nextConfig: NextConfig = {
   output: "export",
-  images: { unoptimized: true },
-  assetPrefix: isProd ? "/Passcodes/" : "",
+  images: {
+    loader: "custom",
+    loaderFile: "src/libs/custom-image-loader.ts",
+  },
   basePath: isProd ? "/Passcodes" : "",
+  assetPrefix: isProd ? "/Passcodes/" : "",
 };
 
 export default nextConfig;

website/src/libs/custom-image-loader.ts

@@ -0,0 +1,20 @@
+// custom-image-loader.js
+// Code: https://stackoverflow.com/a/78220610
+
+import nextConfig from "../../next.config";
+import path from "path";
+
+const basePath = nextConfig.basePath;
+
+export default function myImageLoader({
+  src,
+  width,
+}: {
+  src: string;
+  width: string;
+}) {
+  if (basePath && path.isAbsolute(src)) {
+    return `${basePath}${src}?width=${width}`;
+  }
+  return `${src}?width=${width}`;
+}