#amazon-web-services #image
#amazon-web-services #изображение
Вопрос:
Я пытаюсь отобразить изображение, которое было загружено в aws в приложении react. Что возвращается в ответе, который я использую, чтобы попытаться отобразить мои изображения на странице, примерно так:
{
description: "Rx Renewal - Bottle"
imageLocation: "attachments/8b2050a1/061e/...
previewImageLocation: "attachment-preview-/...
}
и я попытался использовать previewImageLocation and imageLocation в качестве моего src в моем элементе img. Но все, что я получаю, это появление текста alt. Изображения не отображаются. Мне интересно, есть ли какой-то секрет в URL-адресах изображений aws, о котором я не знаю? Это не то, что мне действительно нужно для отображения изображения? Любая информация была бы очень полезной.
Комментарии:
1. Я предполагаю, что вы используете S3 для размещения изображений, но вам следует внести немного больше ясности в свой вопрос с подробным описанием конкретных технологий, которые вы используете — это поможет получить точный ответ от сообщества.
Ответ №1:
Если вы пытаетесь сделать это в приложении react, вам следует обратиться к руководству по библиотеке React Amplify. Использование библиотеки Amplify — самый простой способ взаимодействия с сервисами AWS:
// get the signed URL string
const signedURL = await Storage.get(key) // get key from Storage.list
// inside your template or JSX code. Note <a download> doesn't work here because it is not same origin
<a href={signedURL} target="_blank">{fileName}</a>
Рабочий процесс для представления изображения следующий (при условии, что вы можете получить ключ объекта изображения, хранящегося в корзине S3, из базы данных или что-то подобное):
- Получение ключа объекта изображения, хранящегося в корзине S3
- Получение подписанного URL-адреса из этого ключа объекта с помощью библиотеки Amplify или AWS SDK
- Использование этого URL-адреса для отображения изображения или его загрузки
Вы можете сделать это, используя Amplify Lib, как указано выше. Приветствия