Question

我确定这个问题已经辩论了很多。但是我搜索了几个小时，但似乎没有找到解决方案。大多数指南都比较老，或者我尝试时无法使其正常工作。

我正在使用Nodejs + React应用程序，并且正在使用S3存储图像。我希望React应用程序加载图像，因此将来需要为其提供URL。我过去曾经使用过S3（和RoR），但我记得我曾经创建过一个临时URL，它有时会刷新。

我发现教程说我必须创建一个这样的URL：

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

因此，这不是一个临时URL，而且无论哪种方式都无法正常工作。我得到“拒绝访问”的xml作为回报。我什至在此文件中都授予了权限（我选择了“公开”），但它确实起作用了。

那么我应该如何在React中加载这个图像呢？如何从服务中检索它？我使用的是官方SDK。

Answer 1

在s3中将您的图片上传为公共图片，并通过在网络浏览器中复制和粘贴s3返回的URL来检查该图片是否已获得公共版权，如果图片渲染，则以下面提到的方式使用image标签

在src中插入S3存储桶的图像网址

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

Answer 2

尝试这种方式

将这些策略添加到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 3

所需的是“预签名URL”。不建议将存储桶公开。

就NodeJS而言，是这样的：

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

如何在我的网站上加载上传到S3的图像？

3 个答案: