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

Question

В настоящее время я импортирую файлы в клиентскую папку приложения для реагирования на использование оператора импорта, который, как мне кажется, использует 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:....}

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

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

Answer 1

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

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

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

Внутри index.html вы можете использовать его так:

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

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