Как использовать изображения PNG в Next.js вне каталога PUBLIC по умолчанию?

Question

Я видел, что альтернативой возможности использовать изображения в другом каталоге, отличном от папки Public, является использование библиотеки Next-Images, но я выполняю всю настройку правильно, как описано в документации, я видел несколько видеороликов на интернет, но ничего не работает, могу только svgs загрузить. Я использую машинописный текст в своем проекте. Я заметил деталь, касающуюся набора текста, которую мы должны добавить в эту ссылку:

      /// <reference types="next-images" />

получается вот так:

Еще я заметил, что: когда проект компилируется, консоль браузера тег , в src - это путь:

      /_next/static/images/cora-c562c6fa203473521a5dc5b15a841192.jpg

Поскольку есть другой путь, который вы вручную указали через консоль браузера, он работает:

      /_next/static/image/src/assets/cora.e76cddfc04ca9d4b8a3868b2c40e3b7f.jpg

Итак, если кто-нибудь знает, не хватает ли мне каких-либо настроек, которые я, возможно, не делал, или видео, которое может помочь, или детали из документации, я буду благодарен.

Следующая версия: 11.0.1Typescript Версия: 4.3.5 Версия следующих изображений: 1.8.1

Answer 1

В вашей tsconfig.json, добавлять next-env.d.ts к exclude множество:

      {
  // ...
  "exclude": ["node_modules", "next-env.d.ts"],
  "include": ["**/*"]
}

Создать новый файл custom.d.ts и добавьте это:

      /// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next-images" />

В next.config.json:

      const withImages = require('next-images');

module.exports = withImages({
  images: {
    disableStaticImages: true,
  },
});

---

Обратите внимание, что использование next-imagesвообще не требуется для вашего варианта использования. Next.js теперь поддерживает это из коробки. Итак, с настройкой по умолчанию (свежий create-next-app), вы можете напрямую:

      import Image from 'next/image';
import img from '../path/to/img.png';

<Image src={img} alt="some text"/>

// or with img tag:

<img src={img.src} height="100" width="100" alt="some text"/>

См .: Импорт изображений