Next.js 当存在基本路径时，NextJS v10映像组件无法为映像提供服务

我正在尝试将我的应用程序迁移到最新版本的NextJS（v10）。他们引入了一个新的图像组件（请参阅），当我尝试使用它时，我的应用程序无法正确地提供图像

在我的

next.config.js

中，我设置了一个

basePath

值，以便能够从子路径而不是根路径为我的应用程序提供服务：

const nextConfig={
页面扩展：[“js”、“jsx”、“ts”、“tsx”、“mdx”、“md”]，
基本路径：“/an”，
};

设置此选项后，

Image

组件无法获取我的img文件。没有它，一切都可以完美运行，但我的应用程序无法在

/an

当有一个

basePath

能够为图像提供服务时，我应该如何定义

src

属性

<Image
  src="/me.jpg" <-- This is not working with basePath
  alt="A photo of myself."
  className="rounded-full h-48 w-48 mx-auto"
  width="192"
  height="192"
/>

---

我不知道这是否是问题所在，但您必须像这样将类名提取到父元素中

<div className="rounded-full h-48 w-48 mx-auto">
    <Image
      src="/me.jpg" <-- This is not working with basePath
      alt="A photo of myself."
      width="192"
      height="192"
    />
</div>


这里有一个and（在写这个答案时）

同时，作为一种解决办法，（来自相关问题）

从“React”导入React；
从“下一个/图像”导入图像；
const basePath=process.env.NEXT\u PUBLIC\u BASE\u PATH；
const ImageWithBasePath:图像类型=（道具）=>{
const url=props.src？.startsWith（'/'））
？`${basePath | |'''}${props.src}`
：props.src；
返回；
};
使用BasePath导出默认图像；

将env中的
basePath导出为
NEXT\u PUBLIC\u BASE\u PATH
，并用
import ImageWithBasePath from./ImageWithBasePath'
Image
支持
className
import React from 'react';
import Image from 'next/image';

const basePath = process.env.NEXT_PUBLIC_BASE_PATH;

const ImageWithBasePath: typeof Image = (props) => {
  const url = props.src?.startsWith('/')
    ? `${basePath || ''}${props.src}`
    : props.src;
  return <Image {...props} src={url}></Image>;
};

export default ImageWithBasePath;