Блог

Я пытаюсь перенести свое приложение на последнюю версию NextJS (v10). Они представили новый компонент изображения (см. Примечания к выпуску), и когда я пытаюсь его использовать, мое приложение не может правильно обслуживать изображения.

В моем next.config.js случае я установил basePath значение, чтобы иметь возможность обслуживать мое приложение из подпути вместо root:

 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"
/>
 

Здесь есть открытая проблема и 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 in env как NEXT_PUBLIC_BASE_PATH и замените импорт Image form 'next/image' на import ImageWithBasePath from './ImageWithBasePath'

Я не знаю, проблема ли это, но вы должны извлечь 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>