Как загрузить изображение, загруженное на S3, на моем веб-сайте?

Question

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

Я работаю в приложении Nodejs + React и использую S3 для хранения изображений. Я хочу, чтобы приложение React загрузило изображение, поэтому в будущем мне нужно будет предоставить ему URL. Я работал с S3 в прошлом (и RoR), и я помню, что использовал для создания временного URL, и он время от времени обновлялся.

Учебники, которые я нашел, говорят, что я должен создать URL-адрес, подобный этому:

https://<bucket>.s3.amazonaws.com/<image>

Итак, это не временный URL, и он не работает в любом случае. В ответ я получаю xml «Доступ запрещен». Я даже предоставил разрешения для этого файла (я выбрал «Сделать его общедоступным»), но, похоже, он не работает.

Так как мне загрузить это изображение в React? Как я могу получить его из службы? Я использую официальный SDK.

Answer 1

Попробуйте вот так

Добавить эти правила в корзину S3

{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Sid": "PublicReadGetObject",
           "Effect": "Allow",
           "Principal": "*",
           "Action": [
               "s3:GetObject"
           ],
           "Resource": "arn:aws:s3:::BUCKETNAME/*"
       }
   ]
}

Затем добавьте эти настройки Cors

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <MaxAgeSeconds>9000</MaxAgeSeconds>
   <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

загрузите файлы и получите доступ к файлу

<img src = "https://yourS3Url/image.jpg" />

Answer 2

Требуется предварительно подписанный URL-адрес. Делать ведра общедоступными не рекомендуется.

С точки зрения NodeJS это что-то вроде:

s3Client.getSignedUrl('getObject', {
   Bucket: bucket,
   Key: key,
   Expires: timeInSeconds
});

Answer 3

загрузите ваше изображение как общедоступное в s3 и убедитесь, что изображение имеет общедоступные права, скопировав и вставив URL-адрес, возвращенный s3 в веб-браузер, и если изображение отображается, используйте тег изображения следующим образом

Вставьте ваш URL изображения S3 bucket в src

<img src = "https://yourS3Url/image.jpg" alt = "HTML IMAGE"/>