Различные способы импорта файлов в React - PullRequest
Новая
       41

Различные способы импорта файлов в React

2 голосов
/ 08 октября 2019

В настоящее время я импортирую файлы в папке клиента приложения реагирования, используя оператор импорта, который, как я считаю, использует Webpack. например, 

import cat_png from '../../game_book/images/cat.png';

Это имеет свои ограничения из-за конфигурации Webpack .....

Мне было интересно, есть ли другой способ доступа к файлам в проекте React ....

Моя проблема с текущим способом импорта заключается в том, что если я импортирую png, он дает статическую ссылку, например, 

localhost:8000/static/media/cat.png

, но когда я импортирую файл json, импортируем animals_json из '.. /../game_book/images/animals.json ';Я НЕ ПОЛУЧАЮ 

localhost:8000/static/media/animals.json

Но фактическое содержимое json, например: 

{frames:....}

Мне нужен последовательный способ доступа к ресурсам внутри папки в папке клиента моей реакцииapp .... Поэтому, если у меня есть файл json, я хочу иметь возможность доступа через ./myassets/animals.json или если это изображение ./myassets/myimage.png и т. д. Так же, как когда я использую простойHTML-файл без React .... Я могу получить доступ к папке, которая находится в той же папке, что и HTML-файл, через ./foldername, а затем, если внутри foldername есть myimage.png, то я могу получить к нему доступ через ./foldername/myimage.png

Какие варианты у меня есть? Могу ли я создать свой собственный статический медиа-канал, используя React-router?

1 Ответ

3 голосов
/ 08 октября 2019

Это происходит из-за действий различных загрузчиков в вашей конфигурации, изображения обрабатываются url-loader и file-loader, что дает вам либо URL, либо base64 путь к данным. JSON загружается json-loader, который получает содержимое в виде объекта.

Если вам нужно импортировать эти ресурсы в веб-пакет и получить их URL, вам придется изменить загрузчики, чтобы сделать это. Но если вам просто нужно использовать URL-адреса ресурсов, вы можете использовать папку public.

Если вы поместите файл в общую папку, он не будет обрабатываться Webpack. Вместо этого он будет скопирован в папку сборки без изменений. Для ссылки на ресурсы в общедоступной папке вам нужно использовать специальную переменную PUBLIC_URL.

Внутри index.html вы можете использовать ее следующим образом: 

<link rel="icon" href="%PUBLIC_URL%/favicon.ico">

Различные недостаткии преимущества обсуждаются в документах

...