NextJS v10 Image 组件在有 basePath 时无法提供图像

Posted 2023-03-06

【中文标题】NextJS v10 Image 组件在有 basePath 时无法提供图像

【英文标题】：NextJS v10 Image component fails to serve image when there is a basePath

【发布时间】：2021-03-29 21:49:35

【问题描述】：

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

在我的 next.config.js 中，我设置了一个 basePath 值，以便能够从子路径而不是根路径为我的应用程序提供服务：

const nextConfig = 
  pageExtensions: ["js", "jsx", "ts", "tsx", "mdx", "md"],
  basePath: "/an",
;

设置后，Image 组件无法获取我的 img 文件。没有它，一切都会完美运行，但我的应用程序无法在 /an

上提供服务

我应该如何定义src 属性，而basePath 可以提供图像？

<Image
  src="/me.jpg" <-- This is not working with basePath
  
  className="rounded-full h-48 w-48 mx-auto"
  
  
/>

【参考方案1】：

我不知道这是否是问题，但您必须像这样将 className 提取到父元素

<div className="rounded-full h-48 w-48 mx-auto">
    <Image
      src="/me.jpg" <-- This is not working with basePath
      
      
      
    />
</div>

【讨论】：

Image 支持className

【参考方案2】：

这里有一个open issue 和a PR（在撰写此答案时）。

同时，作为一种解决方法，（来自链接的问题）

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;

在 env 中将 basePath 导出为 NEXT_PUBLIC_BASE_PATH，并将导入的 Image form 'next/image' 替换为 import ImageWithBasePath from './ImageWithBasePath'