Asset Prefix

Author: AbhinavMV

components/Global/Navbar.jsx

@@ -3,7 +3,7 @@ import { HiMenuAlt4 } from 'react-icons/hi'
 import { AiOutlineClose } from 'react-icons/ai'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-
+import {prefix} from '../../constants'
 const NavBarItem = ({ item, pathname, classprops }) => (
   <a href={item.url}>
     <li
@@ -38,7 +38,7 @@ const Navbar = () => {
             href='/'
             passHref
           >
-            <img src='/logo.png' alt='WebXDAO' className='w-24 h-14 md:w-36 md:h-20'/>
+            <img src={prefix+'/logo.png'} alt='WebXDAO' className='w-24 h-14 md:w-36 md:h-20'/>
           </Link>
         </div>
         <ul className='lg:flex hidden list-none flex-row justify-end items-center ml-auto'>

components/Home/DeveloperPath.jsx

@@ -1,3 +1,5 @@
+import { prefix } from "../../constants"
+
 const DeveloperPath = () => {
   const devPaths = [
     {
@@ -51,7 +53,7 @@ const DeveloperPath = () => {
                   <img
                     alt={name}
                     className='bg-gray-50 p-5 rounded-md'
-                    src={imgUrl}
+                    src={prefix+imgUrl}
                   />
                 </div>
                 <div id='body' className='flex flex-col gap-y-3 pl-5'>

components/Home/DevprotocolBrands.jsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { prefix } from '../../constants'
 
 const DevprotocolBrands = () => {
   const projects = [
@@ -42,7 +43,7 @@ const DevprotocolBrands = () => {
             <Link key={name + index} href={url} passHref className='h-full group'>
               <div className='mx-auto flex flex-col justify-evenly items-center h-full object-center text-center p-8 shadow cursor-pointer rounded-md focus:outline-none focus:shadow-outline transform bg-white transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
                 <div className='relative h-24 w-full flex-shrink-0'>
-                  <img src={imgUrl} alt={name} className="object-contain" />
+                  <img src={prefix + imgUrl} alt={name} className="object-contain" />
                 </div>
                 <p className='text-gray-800 mt-8 mb-2 text-sm px-8 sm:px-4 h-full'>{text}</p>
               </div>

components/Home/Testimonials.jsx

@@ -1,3 +1,4 @@
+import { prefix } from "../../constants"
 
 const Testimonials = () => {
   const data = [
@@ -72,7 +73,7 @@ const Testimonials = () => {
               <p className='text-gray-600 text-base mb-2'>{text}</p>
               <div className='flex flex-row items-center justify-start py-2'>
                 <div className='relative h-16 w-16 flex-shrink-0'>
-                  <img src={imgUrl} alt={name} className='object-contain' />
+                  <img src={prefix + imgUrl} alt={name} className='object-contain' />
                 </div>
 
                 <div className='flex flex-col justify-center pl-3'>

constants/index.js

@@ -0,0 +1 @@
+export const prefix = '/WebXDAO.github.io'

next.config.js

@@ -1,4 +1,6 @@
 module.exports = {
+  basePath: '/WebXDAO.github.io',
+  assetPrefix: '/WebXDAO.github.io',
   exportPathMap: function () {
     return {
       '/': { page: '/' }

pages/partners.js

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import { prefix } from '../constants'
 
 export default function Partners() {
   const data = [
@@ -54,7 +55,11 @@ export default function Partners() {
                   >
                     <div className='grid grid-cols-3 items-center justify-start overflow-hidden'>
                       <div className='relative col-span-1'>
-                        <img alt={name} className='bg-gray-50 p-5 rounded-md' src={imgUrl} />
+                        <img
+                          alt={name}
+                          className='bg-gray-50 p-5 rounded-md'
+                          src={prefix + imgUrl}
+                        />
                       </div>
                       <div className='flex flex-col col-span-2 gap-y-3 pl-5'>
                         <h4 className='text-xl font-semibold'>{title}</h4>

pages/projects.js

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import { prefix } from '../constants'
 
 export default function Projects() {
   const data = [
@@ -53,7 +54,7 @@ export default function Projects() {
               <div className='relative mb-6'>
                 <img
                   className='lg:h-60 xl:h-56 md:h-64 h-72 w-full object-cover object-center rounded-md'
-                  src={imgUrl}
+                  src={prefix + imgUrl}
                   alt={name}
                 />
               </div>