queyue-frontend
/
queyue-h5
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: image url

Browse Source
main
fadeaway 6 months ago
parent 5bcd80db42
commit 422c0a7cae
15 changed files with 118 additions and 44 deletions
Show Stats Download Patch File Download Diff File

6
next.config.mjs
Unescape View File

@ -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;

10
src/app/article/page.tsx
Unescape View File

@ -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 && (

13
src/app/download/page.tsx
Unescape View File

@ -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>
)}

23
src/app/page.tsx
Unescape View File

@ -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}

18
src/components/AppLogo/index.tsx
Unescape View File

@ -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" />
<Image className="w-[122px] h-[24px] mt-[20px]" width={122} height={24} src="img/slogn.svg" alt="独立 不独于世" />
<ImageWithBasePath
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>
);
}

11
src/components/ArticalWrap/index.tsx
Unescape View File

@ -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 }) {

6
src/components/ImageWithBasePath/index.tsx
Unescape View File

@ -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} />;
}

6
src/components/JournalAudioCtrlBtn/index.tsx
Unescape View File

@ -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}

13
src/components/JournalBanner/index.tsx
Unescape View File

@ -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}

5
src/components/JournalComment/index.tsx
Unescape View File

@ -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}

5
src/components/JournalContent/index.tsx
Unescape View File

@ -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]">

19
src/components/MusicBanner/index.tsx
Unescape View File

@ -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>
);
}

15
src/components/MusicPanel/index.tsx
Unescape View File

@ -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}

7
src/components/SongItem/index.tsx
Unescape View File

@ -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}

5
src/components/WXComponent/WXShareBtn.tsx
Unescape View File

@ -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}

Write Preview
Loading…
Cancel
Save