Fix image loading

components/Image.tsx

@@ -1,8 +1,22 @@
 import Image, { ImageProps } from 'next/image'
 
+const loader = ({ src }) => {
+  return `${process.env.basePath}/${src}`
+}
+
 function CustomImage(props: ImageProps): JSX.Element {
+  const { src } = props
+  let url = src
+
+  if (typeof src === 'object' && 'src' in src) {
+    url = {
+      ...src,
+      src: `${process.env.basePath}${src.src}`,
+    }
+  }
+
   // eslint-disable-next-line jsx-a11y/alt-text, react/jsx-props-no-spreading
-  return <Image unoptimized {...props} />
+  return <Image unoptimized {...props} loader={loader} src={url} />
 }
 
 export default CustomImage

next.config.js

@@ -12,7 +12,7 @@ const securityHeaders = [
   },
 ]
 
-const basePath = process.env.BASE_PATH || '/'
+const basePath = process.env.BASE_PATH || ''
 
 /**
  * @type {import('next/dist/server/config').NextConfig}
@@ -22,16 +22,18 @@ const nextConfig = {
   target: 'serverless',
   distDir: 'dist',
   basePath,
-  async headers() {
-    return [{ source: '/:path*', headers: securityHeaders }]
+  env: {
+    basePath: process.env.BASE_PATH,
   },
-  assetPrefix: basePath,
   images: {
     loader: 'custom',
     path: basePath,
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
   },
+  async headers() {
+    return [{ source: '/:path*', headers: securityHeaders }]
+  },
   future: {},
   sassOptions: {
     prependData: `@import "styles/variables"; @import "styles/mixins";`,