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

Пользователь

от yasmine , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от laney_johnson , год назад

@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 ссылается на корневую директорию проекта, поэтому добавление ее к пути к файлу позволяет создать абсолютный путь.

Пользователь

от camren , 2 месяца назад

@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 и заменяем последний сегмент пути (имя файла) на пустую строку с помощью регулярного выражения. Затем добавляем относительный путь к изображению к этому текущему пути, чтобы получить абсолютный путь.