显示来自S3的影像-编程知识-白鹭情

我里面有 Amazon AWS S3 存盘桶和影像。我的存盘桶中的每个物件都有自己的链接。当我打开它时，浏览器要求我下载影像。所以，它是一个下载链接，而不是直接在互联网上的图片链接。当然，当我把它放在<img src="https://">它不起作用。

所以我的问题是如何在我的客户端上显示来自 S3 的影像，这样我就不会被迫下载影像，而不仅仅是在网站上观看它们。

我的堆栈：Nest.js 和 React.js (TypeScript)

我如何上传图片：

一项服务：

const svgBuffer = Buffer.from(svgString, 'utf-8');
mainRes = await uploadFile(currency, svgBuffer);

我从以下位置获得了 uploadFile 函式的另一项服务：

uploadFile = (currency: string, svg: Buffer) => {
        const uploadParams = {
            Bucket: this.config.S3_BUCKET_NAME,
            Body: svg,
            Key: `${currency}-chart`,
        };

        return this.s3.upload(uploadParams).promise();
    };

我应该如何获取我的影像：

<img src=`https://${s3bucketPath}/${imagePath}`>

uj5u.com热心网友回复：

这可能是物件元资料的问题。检查元资料并验证内容型别。例如对于 PNG 影像应该是：

Content-Type='image/png'

如果物件的 Content-Type 是“binary/octet-stream”，那么它将下载而不是显示。

通过JavaScript SDK上传时添加相应自变量：

const uploadParams = {
        Bucket: this.config.S3_BUCKET_NAME,
        Body: svg,
        Key: `${currency}-chart`,
        ContentType: 'image/png',
    };

uj5u.com热心网友回复：

上传影像后，您有多种选择可以获取它们，而无需将它们下载到您的应用程序中。

最简单但不是最好的方法是直接从 S3 Bucket 获取它们。

假设我们有bucket: bucket-test，可以直接在浏览器中获取URL：显示来自 S3 的影像

但是你的物件必须是公共的，这是不安全的。此外，它将以转移的形式产生额外的成本。

下一个选项是设定 CloudFront，它将为您的

然后您正在创建指向 S3 物件的 CloudFront

一些优点

您的存盘桶物件可能是私有的。
这也更快，因为影像快取在 AWS Cloudfront 边缘。
您还可以为 Cloudfront 分配设定备用名称并隐藏物件。

您的流量如下所示：

当影像未快取时

用户 <-> Cloudfront Edge <-> S3

当影像被快取时：

用户 <-> Cloudfront Edge

以下是设定 CDN 的方法：https : //aws.amazon.com/cloudfront/getting-started/S3/