next-images нарушают все абсолютные пути в моем проекте next.js

Question

Я хочу, чтобы в моем проекте next.js были встроенные изображения PNG. Поскольку это не поддерживаемая функция, я использую next-images библиотека для этого.

Это мое next.config.js

      const withImages = require('next-images')
module.exports = withImages()

Проблема заключается НЕ в импорте изображения, а во всем остальном импорте: этот код нарушает все абсолютные .jsx импорт по моему проекту.

Есть идеи, как это решить?

Answer 1

Как упоминал выше пользователь @juliomalves, ответ находится по этой ссылке из официальной документации Next.js.

В основном проблема была устранена в 2 этапа:

1. Добавление jsconfig.json файл (если вы используете Typescript, вы должны использовать tsconfig.json вместо).

2. изменение всех абсолютных путей с /components/Something к components/Something (другими словами, удаление первой косой черты).

Answer 2

Поведение по умолчанию next/imageдобавит /_next/image?url=на любой абсолютный URL-адрес изображения.

Обходной путь - использование imgix loaderи указать путь к '':

      // next.config.js
module.exports = {
  images: {
    domains: ['yourServer.com'],
    path: '',
    loader: 'imgix',
  },
}

---

Из исходного кода добавьте root = '/_next/image?url=...'на любой абсолютный URL srcпо дизайну:https://github.com/vercel/next.js/blob/f81a6a5f0fc3a33a51112d4d3261d431e704b0da/packages/next/client/image.tsx#L862

Почему?

Это немного странно, отличается от HTML <image src="">поведение, также сбивает пользователей с толку.

Вы можете следить за новостями https://github.com/vercel/next.js/issues/19206 .