Как подключить картинку в React Sass?

Question

[Goodie128]

Доброго времени.

Проблема такая: в tsconfig использую "baseUrl": "src", при создании компонента в Sass файле пытаюсь прописать путь к картинке.

Пробовал 3 варианта:

background-image: url("public/icons/icon_cross.svg");
background-image: url("/icons/icon_cross.svg");
background-image: url("/public/icons/icon_cross.svg");

Исход один:

Module not found: Error: Can't resolve './public/icons/icon_cross.svg' in 'D:\...\components\TodoBlock'

То есть он пытается найти картинку в компоненте, а не в public.

Как быть?

Comments

[Василий Dekmer]

public , icons и сам scss файл в каком каталоге относительно корня находятся ?
Смысл такой, если папки public и icons находятся в корне сайта, и scss файл находится в корневой папке (css, например), то пути будут другие:
background-image: url("../icons/icon_cross.svg");

[Aetae]

Либо используй относительные пути, как указано выше, либо, если настроено, абсолютные по алиасам, что-то типа: @/public, ~/public или ~@/public.
В последний раз когда юзал реакт - был популярен cra который из коробки этого НЕ умел. Как оно сейчас и на твоей сборке - хз, но если что гуглится быстро.

[Goodie128]

Aetae, да в том то и проблема, что не гуглится

[Goodie128]

Василий Dekmer, public и src на одном уровне находятся

[Aetae]

Goodie128, ну так напиши на основе чего собираешь свой реакт то? vite, cra, webpack, чья-то сборка, ещё что...

[Goodie128]

Aetae, webpack

[Aetae]

Goodie128, /g webpack alias