fix: image url

next.config.mjs

@@ -1,8 +1,12 @@
 /** @type {import('next').NextConfig} */
+
+const basePath = '/html';
+
 const nextConfig = {
   output: 'export',
   distDir: 'html',
-  basePath: '/html',
+  basePath,
+  env: { basePath },
 };
 
 export default nextConfig;

src/app/article/page.tsx

@@ -5,7 +5,7 @@
 
 import { useState, useEffect, useMemo } from 'react';
 
-import Image from 'next/image';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 
 // 获取文章信息
 async function getArticleInfo(journalId: string) {
@@ -44,7 +44,13 @@ export default function Article() {
       )}
       {articleInfo?.image && (
         <div className="relative w-[100%] aspect-square mt-[18px]">
-          <Image className="rounded-[6px] object-cover" unoptimized fill src={articleInfo?.image} alt="cover" />
+          <ImageWithBasePath
+            className="rounded-[6px] object-cover"
+            unoptimized
+            fill
+            src={articleInfo?.image}
+            alt="cover"
+          />
         </div>
       )}
       {articleInfo?.content && (

src/app/download/page.tsx

@@ -5,9 +5,8 @@
 
 import { useEffect } from 'react';
 
-import Image from 'next/image';
-
 import AppLogo from '@/components/AppLogo';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 
 import { download } from '@/utils/download';
 
@@ -32,7 +31,7 @@ export default function Download() {
             <h5 className="font-medium text-[17px] leading-[23.8px] mb-[5px]">下载【雀乐】APP</h5>
             <p className="text-[14px] leading-[19.6px] text-[#ffffffb2] flex items-center">
               点击右上角
-              <Image
+              <ImageWithBasePath
                 unoptimized
                 className="w-[24px] h-[24px]"
                 width={24}
@@ -43,7 +42,13 @@ export default function Download() {
               选择在浏览器中打开
             </p>
           </div>
-          <Image className="w-[37px] h-[35px] mr-[3px]" width={37} height={35} src="img/vector-2.svg" alt="arrow" />
+          <ImageWithBasePath
+            className="w-[37px] h-[35px] mr-[3px]"
+            width={37}
+            height={35}
+            src="img/vector-2.svg"
+            alt="arrow"
+          />
         </div>
       )}
 

src/app/page.tsx

@@ -2,11 +2,11 @@
 
 import { useRef } from 'react';
 
-import Image from 'next/image';
 import Link from 'next/link';
 // import { useRouter } from 'next/navigation';
 
 import AppLogo from '@/components/AppLogo';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 import WXShareBtn from '@/components/WXComponent/WXShareBtn';
 
 import { download } from '@/utils/download';
@@ -37,7 +37,8 @@ export default function Home() {
         {/* 首屏 */}
         <div
           ref={firstScreenRef}
-          className="relative w-full min-h-screen flex flex-col items-center bg-[url(/html/img/index_background.png)] bg-center bg-cover"
+          className="relative w-full min-h-screen flex flex-col items-center bg-center bg-cover"
+          style={{ backgroundImage: `url(${process.env.basePath}/img/index_background.png)` }}
         >
           {/* title */}
           {!inWX && <h1 className="text-center text-[17px] h-[44px] leading-[44px]">雀乐</h1>}
@@ -56,7 +57,7 @@ export default function Home() {
               下载【雀乐】APP
             </button>
             <button className="w-[283px] h-[48px] flex justify-center" onClick={handleSlideDown}>
-              <Image
+              <ImageWithBasePath
                 className="w-[36px] h-[36px] animate-bounce"
                 width={36}
                 height={36}
@@ -70,7 +71,7 @@ export default function Home() {
         {/* 第二屏 */}
         <div className="relative w-full min-h-screen flex flex-col items-center bg-black">
           <div className="w-[75.5%]">
-            <Image
+            <ImageWithBasePath
               className="w-[165.24px] h-[46.44px] mt-[51.58px]"
               width={165.24}
               height={46.44}
@@ -98,7 +99,7 @@ export default function Home() {
               恒久的&nbsp;温暖有如初生
             </p>
 
-            <Image
+            <ImageWithBasePath
               className="w-[299px] h-[451.61px] mt-[26px] ml-auto mr-auto"
               width={299}
               height={451.61}
@@ -120,7 +121,13 @@ export default function Home() {
               >
                 官方微博
                 <span className="absolute top-[50%] right-[-24px] translate-y-[-50%]">
-                  <Image className="w-[24px] h-[24px]" width={24} height={24} src="img/icon.svg" alt="arrow-right" />
+                  <ImageWithBasePath
+                    className="w-[24px] h-[24px]"
+                    width={24}
+                    height={24}
+                    src="img/icon.svg"
+                    alt="arrow-right"
+                  />
                 </span>
               </Link>
             </p>
@@ -129,7 +136,7 @@ export default function Home() {
             <p className="text-center text-[20px] font-medium h-[33.6px] flex items-center justify-center">
               <span className="relative block h-[100%]">
                 加入我们
-                <Image
+                <ImageWithBasePath
                   className="w-[24px] h-[24px] absolute top-[50%] right-[-24px] translate-y-[-50%]"
                   width={24}
                   height={24}
@@ -145,7 +152,7 @@ export default function Home() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <Image
+              <ImageWithBasePath
                 className="w-[97.5px] h-[97.5px] mb-[10.5px]"
                 width={97.5}
                 height={97.5}

src/components/AppLogo/index.tsx

@@ -1,11 +1,23 @@
-import Image from 'next/image';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 
 export default function AppLogo(props: { className?: string }) {
   const cls = props.className || '';
   return (
     <div className={`flex flex-col items-center ${cls}`}>
-      <Image className="w-[90px] h-[90px]" width={90} height={90} src="img/app_icon_white_bg.svg" alt="queyue" />
+      <ImageWithBasePath
-      <Image className="w-[122px] h-[24px] mt-[20px]" width={122} height={24} src="img/slogn.svg" alt="独立 不独于世" />
+        className="w-[90px] h-[90px]"
+        width={90}
+        height={90}
+        src="img/app_icon_white_bg.svg"
+        alt="queyue"
+      />
+      <ImageWithBasePath
+        className="w-[122px] h-[24px] mt-[20px]"
+        width={122}
+        height={24}
+        src="img/slogn.svg"
+        alt="独立 不独于世"
+      />
     </div>
   );
 }

src/components/ArticalWrap/index.tsx

@@ -2,10 +2,17 @@
 
 import { useState } from 'react';
 
-import Image from 'next/image';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 
 const Icon = ({ name }: { name: string }) => (
-  <Image className="w-[24px] h-[24px] ml-[1px]" width={24} height={24} unoptimized src={`img/${name}.png`} alt={name} />
+  <ImageWithBasePath
+    className="w-[24px] h-[24px] ml-[1px]"
+    width={24}
+    height={24}
+    unoptimized
+    src={`img/${name}.png`}
+    alt={name}
+  />
 );
 
 export default function ArticalWrap(props: { content?: any }) {

src/components/ImageWithBasePath/index.tsx

@@ -0,0 +1,6 @@
+import Image from 'next/image';
+
+export default function ImageWithBasePath(props: any) {
+  const imgSrc = process.env.NODE_ENV === 'development' ? `${process.env.basePath}/${props?.src || ''}` : props?.src;
+  return <Image {...props} src={imgSrc} alt={props?.alt} />;
+}

src/components/JournalAudioCtrlBtn/index.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 
-import Image from 'next/image';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 
 import { useJournalAudioContext } from '@/context/JournalAudioContext';
 
@@ -24,7 +24,7 @@ export default function JournalAudioCtrlBtn() {
 
   return (
     <>
-      <Image
+      <ImageWithBasePath
         className={`w-[60px] h-[60px] absolute top-[-30px] right-[16px] ${!playing && 'hidden'}`}
         width={60}
         height={60}
@@ -33,7 +33,7 @@ export default function JournalAudioCtrlBtn() {
         alt="play_pause"
         onClick={handleClick}
       />
-      <Image
+      <ImageWithBasePath
         className={`w-[60px] h-[60px] absolute top-[-30px] right-[16px] ${playing && 'hidden'}`}
         width={60}
         height={60}

src/components/JournalBanner/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import Image from 'next/image';
 // import { useRouter } from 'next/navigation';
 
+import ImageWithBasePath from '@/components/ImageWithBasePath';
+
 export default function JournalBanner() {
   // const router = useRouter();
   const handleClick = () => {
@@ -14,9 +15,15 @@ export default function JournalBanner() {
       className="flex items-center w-full bg-[#000000f2] text-[#ffffffb2] text-[14px] py-[12px] px-[18px]"
       onClick={handleClick}
     >
-      <Image className="w-[28px] h-[28px]" width={28} height={28} src="img/app_icon_white_bg.svg" alt="queyue" />
+      <ImageWithBasePath
+        className="w-[28px] h-[28px]"
+        width={28}
+        height={28}
+        src="img/app_icon_white_bg.svg"
+        alt="queyue"
+      />
       <span className="flex-1 pl-[12px]">邀你一起来【雀乐】听歌</span>
-      <Image
+      <ImageWithBasePath
         className="w-[24px] h-[24px] mr-[-6px]"
         width={24}
         height={24}

src/components/JournalComment/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import Image from 'next/image';
 // import { useRouter } from 'next/navigation';
 
+import ImageWithBasePath from '@/components/ImageWithBasePath';
+
 export default function JournalComment({ journalInfo }: { journalInfo: any }) {
   // const router = useRouter();
   const handleClick = () => {
@@ -18,7 +19,7 @@ export default function JournalComment({ journalInfo }: { journalInfo: any }) {
         说点想说的
       </div>
       <div className="relative ml-[14px]" onClick={handleClick}>
-        <Image
+        <ImageWithBasePath
           className="w-[24px] h-[24px]"
           width={24}
           height={24}

src/components/JournalContent/index.tsx

@@ -5,9 +5,8 @@
 
 import { useEffect, useState } from 'react';
 
-import Image from 'next/image';
-
 import ArticalWrap from '@/components/ArticalWrap';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 import JournalComment from '@/components/JournalComment';
 import SongList from '@/components/SongList';
 
@@ -61,7 +60,7 @@ export default function JournalContent() {
       <div className={`w-full flex-1 flex-col ${loading ? 'hidden' : 'flex'}`}>
         {/* 期刊封面图 */}
         <div className="relative w-[100%] h-[264.84px]">
-          <Image className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-cover" />
+          <ImageWithBasePath className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-cover" />
         </div>
 
         <section className="relative w-full flex-1 bg-white mt-[-10px] rounded-tl-[12px] rounded-tr-[12px] z-1 py-[17px] px-[18px] pb-[79px]">

src/components/MusicBanner/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import Image from 'next/image';
 // import { useRouter } from 'next/navigation';
 
+import ImageWithBasePath from '@/components/ImageWithBasePath';
+
 export default function MusicBanner() {
   // const router = useRouter();
   const handleClick = () => {
@@ -14,9 +15,21 @@ export default function MusicBanner() {
       className="flex items-center w-full bg-[#1d1d1d] text-[#ffffffb2] text-[14px] py-[12px] px-[18px] rounded-[6px] mt-[4px]"
       onClick={handleClick}
     >
-      <Image className="w-[28px] h-[28px]" width={28} height={28} src="img/app_icon_white_bg.svg" alt="queyue" />
+      <ImageWithBasePath
+        className="w-[28px] h-[28px]"
+        width={28}
+        height={28}
+        src="img/app_icon_white_bg.svg"
+        alt="queyue"
+      />
       <span className="flex-1 pl-[12px]">邀你一起来【雀乐】听歌</span>
-      <Image className="w-[24px] h-[24px]" width={24} height={24} src="img/jourrnal_icon-5.svg" alt="right-arrow" />
+      <ImageWithBasePath
+        className="w-[24px] h-[24px]"
+        width={24}
+        height={24}
+        src="img/jourrnal_icon-5.svg"
+        alt="right-arrow"
+      />
     </div>
   );
 }

src/components/MusicPanel/index.tsx

@@ -2,10 +2,9 @@
 
 import { useState, useRef, useEffect } from 'react';
 
-import Image from 'next/image';
-
 import AudioPlayer from '@/components/AudioPlayer';
 import type { IAudioPlayerRef } from '@/components/AudioPlayer';
+import ImageWithBasePath from '@/components/ImageWithBasePath';
 
 async function getMusic(songId: string) {
   const res = await fetch(`http://api.indie.cn:9012/luoo-music/song/${songId}`);
@@ -60,9 +59,15 @@ export default function MusicPanel() {
       <div className={`w-full ${loading && 'invisible'}`}>
         <div className="relative w-[100%] aspect-square mt-[12px]">
           {musicInfo?.pic && (
-            <Image className="rounded-[6px] object-cover" unoptimized fill src={musicInfo?.pic} alt="cover" />
+            <ImageWithBasePath
+              className="rounded-[6px] object-cover"
+              unoptimized
+              fill
+              src={musicInfo?.pic}
+              alt="cover"
+            />
           )}
-          <Image
+          <ImageWithBasePath
             className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${!playing && 'hidden'}`}
             width={60}
             height={60}
@@ -71,7 +76,7 @@ export default function MusicPanel() {
             alt="pause"
             onClick={togglePlay}
           />
-          <Image
+          <ImageWithBasePath
             className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] ${playing && 'hidden'}`}
             width={60}
             height={60}

src/components/SongItem/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import Image from 'next/image';
 // import { useRouter } from 'next/navigation';
 
+import ImageWithBasePath from '@/components/ImageWithBasePath';
+
 import styles from './index.module.css';
 
 import { useJournalAudioContext } from '@/context/JournalAudioContext';
@@ -35,7 +36,7 @@ export default function SongItem(props: { data: ISong }) {
 
   return (
     <div className="flex items-center py-[12px]">
-      <Image
+      <ImageWithBasePath
         className="w-[48px] h-[48px] rounded-[3px]"
         width={48}
         height={48}
@@ -60,7 +61,7 @@ export default function SongItem(props: { data: ISong }) {
           <span></span>
         </div>
       )}
-      <Image
+      <ImageWithBasePath
         className="w-[24px] h-[24px]"
         width={24}
         height={24}

src/components/WXComponent/WXShareBtn.tsx

@@ -2,9 +2,10 @@
 
 import { /** useState, */ useEffect, useRef } from 'react';
 
-// import Image from 'next/image';
 import wx from 'weixin-js-sdk';
 
+// import ImageWithBasePath from '@/components/ImageWithBasePath';
+
 import { APPID } from '@/const';
 import useUA from '@/hooks/useUA';
 
@@ -90,7 +91,7 @@ export default function WXShareBtn() {
         className="w-[283px] h-[48px] flex items-center justify-center bg-[#000000f2] font-medium text-[17px] rounded-full mb-[16px]"
         onClick={handleShare}
       >
-        <Image
+        <ImageWithBasePath
           className="w-[24px] h-[24px] mr-[6px]"
           width={24}
           height={24}