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

Question

Привет уважаемые разработчики,

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

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

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

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

пс: "я новичок"

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

Answer 1

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

1) Общая папка

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

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

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

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

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

2) S3 (или аналогичные сервисы)

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

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

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

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