1

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

在我的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
  alt="A photo of myself."
  className="rounded-full h-48 w-48 mx-auto"
  width="192"
  height="192"
/>
4

2 回答 2

0

这里有一个未解决的问题和一个 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;

将您basePath的环境导出为NEXT_PUBLIC_BASE_PATH并将导入替换Image form 'next/image'为import ImageWithBasePath from './ImageWithBasePath'

于 2021-05-18T12:39:28.067 回答
-1

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

<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>
于 2020-12-20T16:20:11.843 回答