显示来自 S3 的图像

Question

我有 Amazon AWS S3 Bucket 和里面的图像。我桶中的每个对象都有自己的 link。当我打开它时，浏览器要求我下载图像。所以，是下载link，而不是直接在网上下载link的图片。当然，当我把它放到<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}`>

Answer 1

这可能是对象元数据的问题。检查元数据并验证内容类型。例如，对于 PNG 图像应该是：

Content-Type='image/png'

如果对象的 Content-Type 是 'binary/octet-stream' 那么它将下载而不是显示。

通过JavaScriptSDK上传时添加相应参数：

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

来自作者的UPD：添加这个，一切都会起作用

ContentType: 'image/svg+xml'

Answer 2

图片上传后，您可以通过多种方式获取它们，而无需将它们下载到您的应用程序。

最简单但不是最好的方法是直接从 S3 存储桶中获取它们。

假设我们有桶：bucket-test，您可以直接在浏览器中获取URL：

但是你的对象必须是 public 这是不安全的。而且，它会以转帐的形式产生额外的成本。

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

创建一个 CDN

然后您将创建指向 S3 对象的 CloudFront

一些专家

您的存储桶对象可能是私有的。
这也更快，因为图像缓存在 AWS Cloudfront 边缘。
您还可以为您的 Cloudfront 分配设置替代名称并隐藏对象。

您的流量如下所示：

当图像未缓存时

用户 <-> Cloudfront Edge <-> S3

缓存图像时：

用户 <-> Cloudfront Edge

CDN 设置方法如下：https://aws.amazon.com/cloudfront/getting-started/S3/

显示来自 S3 的图像

Display images from S3

amazon-s3

amazon-web-services

typescript

reactjs

nestjs

当图像未缓存时

缓存图像时：