Next.js basePath 如何处理图像？

Question

Next.js basePath 如何处理图像？

basePath我正在尝试向我的中添加 a next.config.js，它非常适合网站内容。但所有的图像都被破坏了。

// next.config.js
module.exports = {
  basePath: '/my-sub-url',
  assetPrefix: '/my-sub-url/'
}

Run Code Online (Sandbox Code Playgroud)

我还尝试将所有图像路径添加到类似这样的内容：

src="/my-sub-url/image.jpg"

Run Code Online (Sandbox Code Playgroud)

我也尝试my-sub-url在我的public文件夹中创建一个文件夹，但仍然没有成功。

我的代码和图像都在我的 GitHub 私人项目中，我正在使用 Vercel.com 进行部署。目前我使用的是 Next.js v10 canary。

这是因为我将图像托管在 GitHub 中吗？或者我错过了任何其他设置？在 Vercel/Next.js 文档和其他在线位置中似乎找不到任何内容。

Answer 1

RAY*_*RAY 1

Next.js 官方文档指出，basePath 需要在 Images[Src] 属性中显式编码。

因此，如果您在 next.config.js 中设置 basePath，如下所示：

      /** @type {import('next').NextConfig} */
    const nextConfig = {
    basePath: '/absproxy/3000',
    assetPrefix: '/absproxy/3000',
    reactStrictMode: true,
    swcMinify: true,
    trailingSlash: true,
    async rewrites() {
        return [
        {
            source: '/images/:path*',
            destination: '/absproxy/3000/images/:path*', // The :path parameter isn't used here so will be automatically passed in the query
        },
        ]
    },
    images: {
        path: '/absproxy/3000/_next/image',
    },
    }

    module.exports = nextConfig

Run Code Online (Sandbox Code Playgroud)

然后我的flower.jpg 位于

{my_project_path}/public/images/flower.jpg

这里我们有 3 种方法在 Image 组件中应用 basePath：

硬编码

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import Link from 'next/link';
import Image from 'next/image'; 

export default function Home() {
    return (
        <div className={styles.container}>
        <Head>
            <title>Create Next App</title>
            <link rel="icon" href="/favicon.ico" />
        </Head>
        <main>
            <Image
            src='/absproxy/3000/images/flower.jpg'// Route of the image file
            height={144} // Desired size with correct aspect ratio
            width={144} // Desired size with correct aspect ratio
            alt="Your Name"
            />
        </main>
        </div>
    )
}

Run Code Online (Sandbox Code Playgroud)

将图像文件导入为变量 ({flower})：

从“../public/images/flower.jpg”导入花

然后用作 Image[src] 属性：

    import Head from 'next/head';
    import styles from '../styles/Home.module.css';
    import Link from 'next/link';
    import Image from 'next/image';
    import flower from '../public/images/flower.jpg'
    export default function Home() {
        return (
            <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
                <Image
                src={flower}// Route of the image file
                height={144} // Desired size with correct aspect ratio
                width={144} // Desired size with correct aspect ratio
                alt="Your Name"
                />
            </main>
            </div>
        )
    }

Run Code Online (Sandbox Code Playgroud)

导入

基本路径

next.config.js 中的变量，然后连接静态图像文件的相对路径，然后应用在图像组件的 src 属性中。

源={ ${basePath}/images/flower.jpg}

        import Head from 'next/head';
    import styles from '../styles/Home.module.css';
    import Link from 'next/link';
    import Image from 'next/image';

    import { basePath } from '../next.config';

    export default function Home() {
        return (
            <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
                <Image
                src={`${basePath}/images/flower.jpg`}// Route of the image file
                height={144} // Desired size with correct aspect ratio
                width={144} // Desired size with correct aspect ratio
                alt="Your Name"
                />
            </main>
            </div>
        )
    }

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，10 月前
查看次数：	1741 次
最近记录：	2 年，6 月前