Use basePath in image paths

hallipr · Mar 23, 2024 · 85310b0 · 85310b0
1 parent c8f4e7f
commit 85310b0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/new-app/app/page.tsx b/new-app/app/page.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import nextConfig from "../next.config.mjs";
 
 export default function Home() {
   return (
@@ -17,7 +18,7 @@ export default function Home() {
           >
             By{" "}
             <Image
-              src="/vercel.svg"
+              src={`${nextConfig.basePath}/vercel.svg`}
               alt="Vercel Logo"
               className="dark:invert"
               width={100}
@@ -31,7 +32,7 @@ export default function Home() {
       <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
         <Image
           className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
+          src={`${nextConfig.basePath}/next.svg`}
           alt="Next.js Logo"
           width={180}
           height={37}

diff --git a/new-app/tsconfig.json b/new-app/tsconfig.json
@@ -24,3 +24,4 @@
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
+