Как загрузить изображения из локального каталога и отобразить их в приложении reactjs? - PullRequest
Новая
       74

Как загрузить изображения из локального каталога и отобразить их в приложении reactjs?

0 голосов
/ 09 января 2020

Здравствуйте, уважаемые разработчики,

Я использую шаблон приложения ant design в качестве внешнего интерфейса и API-интерфейс graphql в качестве бэкэнда, я попал в ситуацию, когда мне хотелось бы получить список сообщений, все работает нормально на бэкэнде API возвращает сообщения вместе с их путем к изображениям.
Чтобы понять больше, images path are save on database, and the images itself are stored in local folder.

Теперь я не знаю, как загрузить эти изображения с путями, которые я получил, когда я получил posts.

Я пробовал Google, но подобной ситуации не было, я обнаружил проблему на gethub, но речь шла об отображении одного изображения с помощью import image from folder and then put it inside img tag, а это не мой случай.

я знаю, что есть альтернативный способ - развернуть мой бэкэнд на веб-сервере, а затем получить прямой доступ к сохраненным изображениям, но это не идеально для меня.

ps: "я новичок ie "

Спасибо всем вам,

1 Ответ

1 голос
/ 09 января 2020

Существует несколько разных подходов:

1) Publi c папка

Когда вы запускаете приложение реакции, в структуре папок вы будете найдите папку "publi c". Эта папка, например, также содержит значок. Когда вы помещаете туда свои изображения, вы можете добраться до них по 

<img src="/imagename.jpg" />

. В вашей базе данных вам нужно будет сохранить путь "/imagename.jpg", чтобы добраться до них.

Если вы создадите подпапку в папке "publi c", путь в атрибуте sr c также необходимо будет изменить. Пример: - public - assets --- avatar.jpg 

<img src="/assets/avatar.jpg" />

2) S3 (или некоторые похожие сервисы)

Загрузить их в Amazon S3 и сохранить этот путь. Это можно сделать вручную или позволить вашему API справиться с этим. Таким образом, вы можете просто указать абсолютный путь к тегу img.

3) Собственный веб-сервер

Загрузить их на свой веб-сервер во время загрузки изображения.

Примечание: Получение файлов из локальной папки за пределами папки проекта невозможно без использования какого-либо другого веб-сервера.

...