React Web UI 中的图像渲染问题

Question

我在 S3 上上传了一张图像，我想在我的 React 网站中将其渲染为登录用户的个人资料图片。

存储此图像的 S3 存储桶具有以下存储桶策略。我还可以验证该对象是否具有正确的内容类型

image/jpeg

设置为系统定义的元数据。当我执行 get 请求来获取图像时，我在网络选项卡中收到响应代码 200，但图像未呈现。附上相同的屏幕截图。我还验证了对象所有权是由存储桶所有者强制执行的，因此 ACL 被禁用。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Allow only GET requests originating from www.wecoach.ai and wecoach.ai",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::wecoach-user-data/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "http://wecoach.ai/"
                    ]
                }
            }
        }
    ]
}

Answer 1

问题不在于S3设置，而在于我上传图像的方式，事实证明我不应该使用

new FormData()

上传到预签名 URL 时。

参考

通过签名网址将图像上传到 AWS-S3 时图像损坏