尽管存储桶是公共的，但 Amazon S3 base64 图像不适用于 og:image 标签

Posted 2023-03-22

技术标签:

【中文标题】尽管存储桶是公共的，但 Amazon S3 base64 图像不适用于 og:image 标签【英文标题】：Amazon S3 base64 Image is not working on og:image tags though bucket is public 【发布时间】：2022-01-15 00:48:18 【问题描述】：

请给我一些指导以解决下面列出的问题。

我在用于获取图像的 og 标记上遇到问题。我正在使用带有 Razzle 的 React 进行服务器端渲染。所有站点图像都存储在 aws 存储桶中，该存储桶具有公共访问权限以获取图像。

这些是我通过 Helmet 在特定页面下使用的标签。

<Helmet>
          <title>this.props.data.title+" | by "+this.props.data.username </title>
          /* facebook open graph tags */
          <meta data-rh="true" property="og:locale" content="en_US" />
          <meta data-rh="true" property="og:url" content="http://somedomain.com/view/Some title of the post" />
          <meta data-rh="true" property="og:title" content="Some title of the post" />
          <meta data-rh="true" property="og:type" content="article" />
          <meta data-rh="true" property="og:description" content="Description of the post" />
          <meta property="og:image" content="https://s3.ap-south-1.amazonaws.com/bucketname/somerandomnameofimage.png" />
          <meta property="og:site_name" content="SiteName" />  
        </Helmet>

经过一些发现后，我在 og 标签 url 中使用了来自 google 的随机图像并且工作正常，但是当我对相同图像或不同图像使用 s3 存储桶链接时它不起作用。

我在想的是它不会获取 aws s3 图像。但如果是这样，那么其他人会怎么做。

我检查了许多网站的 og 标签，发现它们会使用一些 subdomain.domain.com/someimagename.extension，如果这是唯一的情况，那么我如何实现这一点。我的问题是，如果我们必须像古老的编程方式那样使用图像托管服务提供商，为什么还要使用它。

请建议我如何解决这个问题。非常感谢任何帮助或建议。

更新我对此进行了深入研究，发现图像会出现一些问题，因为我的图像是通过 Base 64 图像从 FE 上传到后端的。后端将该图像上传到 s3。

我已经通过 curl 命令检查了我的图片 URL，即

curl -i "mybucket-imageurl"

我发现的等等

HTTP/1.1 200 OK
x-amz-id-2: ***********************************************************
x-amz-request-id: ****************
Date: Mon, 13 Oct 2020 08:37:31 GMT
Last-Modified: ************************
ETag: "*********************"
Content-Encoding: base64
x-amz-version-id: ***********************
Accept-Ranges: bytes
Content-Type: image/jpeg
Server: AmazonS3
Content-Length: 1095517

然后我直接在亚马逊 S3 上上传了一张图片，并使用了该网址并获取了 og:image。卷曲响应是

HTTP/1.1 200 OK
x-amz-id-2: ***********************************************************
x-amz-request-id: ****************
Date: Mon, 13 Oct 2020 08:37:31 GMT
Last-Modified: ************************
ETag: "*********************"
x-amz-version-id: ***********************
Accept-Ranges: bytes
Content-Type: image/png
Server: AmazonS3
Content-Length: 569666

我检查了上面的响应没有内容编码列。

任何人都可以建议我该怎么做，因为在我的存储桶上大约有 500 多张图片是由 base 64 上传的并且有同样的问题。

什么是最好和最有效的方法来做到这一点

【问题讨论】：

【参考方案1】：

没有人推荐我真的很糟糕。

那么我的发现和解决我的问题的解决方案是，当我们将 base64 图像从服务器上传到 s3 时，图像上会附加一个标题