使用 React JS 从 S3 Bucket 获取图像答案

【问题标题】：Fetch image from S3 Bucket using React JS使用 React JS 从 S3 Bucket 获取图像
【发布时间】：2020-02-01 06:32:23
【问题描述】：

我一直在尝试从 s3 存储桶中获取图像到我的 react UI，我的应用程序是由 laravel 和 react 组成的，所以我能够为 laravel 激活 s3，它在我能够渲染时工作图片到管理员端。

现在回到由响应组成的前端，我一直觉得很难做到，我已经安装了

  "@aws-amplify/storage": "^1.1.2",
        "aws-amplify": "^1.1.40",
        "aws-amplify-react": "^2.4.4",
        "aws-config": "^1.3.2",

请帮帮忙

【问题讨论】：

【解决方案1】：

我遇到了同样的问题并解决了问题

<Image src={'http://innopizza.s3-eu-west-2.amazonaws.com/abc.jpg'} />

【讨论】：

【解决方案2】：

我认为问题与您的依赖关系没有任何关系，但更重要的是，如果您不调用存储文件的存储桶，您将无法获取它们

【讨论】：

【解决方案3】：

https://bucketname.s3.us-east-2.amazonaws.com/foldername/filename.png} alt="image"/>

-桶和它的所有对象都必须是公共的

-您的对象的准确访问链接是 aws 平台上的“objecturl”

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

我可以通过在从数据库调用图像目录之前添加 s3 URL 来解决此问题。

片段；

<Image src={'http://innopizza.s3-eu-west-2.amazonaws.com/'+this.props.pizza.image} />

【讨论】：

【解决方案5】：

这似乎对我有用

<img src="https://AWS-OBJECT-URL.s3.amazonaws.com/IMAGE-NAME.jpg" />

【讨论】：