Fix paths to static assets

web/components/Image/index.js

+import { Box, chakra } from '@chakra-ui/react'
+import NextImage from 'next/image'
+
+const CoverImg = chakra(NextImage, {
+  shouldForwardProp: (prop) =>
+    ['width', 'height', 'src', 'alt', 'quality', 'placeholder', 'blurDataURL', 'loader '].includes(
+      prop,
+    ),
+})
+
+const myLoader = ({ src, width, quality }) => {
+  return `${src}?w=${width}&q=${quality}`
+}
+
+export const Image = (props) => {
+  const { src, alt, ...rest } = props
+  return (
+    <Box pos="relative" cursor="pointer" className="group" {...rest}>
+      <CoverImg
+        w="auto"
+        h="auto"
+        loader={myLoader}
+        width={600}
+        quality={50}
+        height={384}
+        placeholder="blur"
+        src={src}
+        alt={alt}
+        transition="all 0.2s"
+        _groupHover={{
+          transform: 'scale(1.05)',
+        }}
+      />
+    </Box>
+  )
+}

web/components/Layout/Footer.js

-import { Button, Container, Flex, Image, useColorMode, useColorModeValue } from '@chakra-ui/react'
+import { Button, Container, Flex, useColorMode, useColorModeValue } from '@chakra-ui/react'
 // import ActiveLink from '../Link/ActiveLink'
 import { MoonIcon, SunIcon } from '@chakra-ui/icons'
 import RenderSections from '../Sections/RenderSection'
 import License from '../License'
 import React from 'react'
 import Publisher from '../Publisher'
+import Image from '../Image'
 
 /* const MenuItem = ({ children }) => (
   <Text
@@ -45,7 +46,7 @@ export default function Footer(props) {
         </Button>
       </Flex>
 
-      <Image src="/img/taakeheimen-footer.svg" alt="" />
+      <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/taakeheimen-footer.svg`} alt="" />
 
       <Container maxW="4xl" p="0" sx={{ perspective: '492px' }}>
         {/* <Flex pb="0">

web/components/Sections/PageHeader.js

@@ -13,7 +13,7 @@ export default function PageHeader(props) {
       pb="16"
       mb="8"
       maxW="xl"
-      backgroundImage="url('/img/taakeheimen-border.svg')"
+      backgroundImage={`url('${process.env.NEXT_PUBLIC_BASE_PATH}/img/taakeheimen-border.svg')`}
       backgroundPosition="bottom"
       backgroundRepeat="no-repeat"
     >

web/next.config.js

@@ -2,18 +2,9 @@ module.exports = {
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
-        use: ["@svgr/webpack"],
-    });
+      use: ['@svgr/webpack'],
+    })
     return config
-  }
-  /* basePath: '/exhibition',
-  async redirects() {
-    return [
-      {
-        source: '/exhibition',
-        destination: '/exhibition/chk',
-        permanent: true,
-      },
-    ]
-  }, */
-}
\ No newline at end of file
+  },
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+}