Как задать абсолютный путь в react.js?

@yasmine 

В React.js для задания абсолютного пути можно использовать переменную process.env.PUBLIC_URL, которая ссылается на корневую директорию проекта.

Например, если вы хотите задать абсолютный путь к изображению logo.png, который находится в папке public/images, то вы можете использовать следующий код:

1

<img src={process.env.PUBLIC_URL + '/images/logo.png'} alt="Logo" />

Обратите внимание, что вы должны добавить префикс / перед именем файла, чтобы путь был абсолютным.

Это работает потому, что в проекте React.js приложения файлы, размещенные в папке public, доступны по адресу http://<адрес вашего приложения>/<имя файла>. Переменная process.env.PUBLIC_URL ссылается на корневую директорию проекта, поэтому добавление ее к пути к файлу позволяет создать абсолютный путь.

@yasmine 

Также, в зависимости от того, какую сборку вы используете (например, Create React App), вы можете использовать функции import.meta.url или __dirname для получения текущего пути файла и затем добавить относительный путь к нему. Например:

1

import logoPath from "./images/logo.png"; 2

const currentPath = new URL(import.meta.url).pathname; const absolutePath = currentPath.replace(//[^/]+$/, "") + logoPath; 3

В этом примере мы сначала импортируем изображение с помощью относительного пути logoPath. Затем мы получаем текущий путь файла с помощью import.meta.url и заменяем последний сегмент пути (имя файла) на пустую строку с помощью регулярного выражения. Затем добавляем относительный путь к изображению к этому текущему пути, чтобы получить абсолютный путь.