Использование папки public в React.js

Как известно, исходные файлы проекта для приложения у нас обычно лежат в папке src, а в папке public изначально находится сам файл html, в который мы потом рендерим весь проект в div id="root" и находится Favicon.

Конечно, хорошо, что мы можем править файл html, но хотелось бы помещать в данную папку различные файлы, которые не должны компилироваться и собираться.

К таким файлам относятся, например, картинки. Но их можно и разбросать по компонентам. Куда сложнее дело обстоит, если приложение использует JSON для загрузки каких-то данных. Я обычно использую такой формат в качестве массива конфигурационных переменных. Когда приложение в продакшене, то основные входящие переменные можно изменить в вынесенном JSON без изменения js файла и без каких либо баз данных. Казалось бы, в чем проблема? Указываем путь ../../public/config.json и всё. Ан нет, мы не увидим картинку на нужном месте:

И здесь собственно нам может помочь переменная, которая содержит путь до папки public.

process.env.PUBLIC_URL

Соответственно картинку мы вставим

<img src={`${process.env.PUBLIC_URL}/img/Pay.jpg`}/>

Если нужно картинку использовать в качестве фона в стилях, можно данный стиль оставить в js файле, а всё остальное вынести в модуль scss.

let BackgroundImage = { "background-image" : `url(${process.env.PUBLIC_URL}/img/Abaut.png)`};

<div className={styles.AbautImg} style={BackgroundImage}></div>

Подробнее можно почитать в документации