Как Вы импортируете изображения в NextJS?

Question

[Михаил Р.]

Необходимо в импортируемом компоненте вывести изображение с указанным адресом, пример компонентов:

Компонент B:

import Image from 'next/image';
export const B = ({imgPath}) => <Image src={imgPath} width={0} height={0}/>

Компонент Page:

import {B} from 'B';
export const Page = () => <B imgPath='public/img/icon.png'/>

Пробовал варианты:
- subpath-imports.
- jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "./src/",
        "paths": {
            "@/img/*": ["/public/img/*"]
        }
    }
}

Если пробовать подключать изображение в компоненте Page, то работает вариант: `/img/icon.png`, но если этот путь передать в компонент B, то уже не работает.

Удалось создать алиасы лишь для импорта компонентов "@lib/B" или "#lib/B", но не для изображений.
Что делать?

Comments

[godsplane]

Так разве в папку паблик не работает путь /img из любого места проекта?

Answer 1

[iljaGolubev]

public/img/icon.png - действительно относительный урл?
host:port/public/img/icon.png доступен?

А так?

import icom from '../public/img/icon.png'
import {B} from 'B';
export const Page = () => <B imgPath={icon}/>