尽管存储桶是 public,但 Amazon S3 base64 图像无法处理 og:image 标签
Amazon S3 base64 Image is not working on og:image tags though bucket is public
请给我一些解决下列问题的建议。
我在获取图像的 og 标签方面遇到了问题。我正在使用 React with Razzle 进行服务器端渲染。所有站点图像都存储在 aws 存储桶中,该存储桶具有 public 访问权限以获取图像。
这些是我通过头盔在特定页面下使用的标签。
<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 bucket link 用于相同图像或不同图像时没用。
我在想的是它不会获取 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 上上传了一张图片并使用了 url 并获得了 og:image。
curl 响应是
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 上传的并且有同样的问题。
最好和最有效的方法是什么
真可惜没人推荐我
那么我的发现和解决我问题的解决方案是,当我们将 base64 图像从服务器上传到 s3 时,图像上附加了一个 header,即
content-encoding: base64
我们需要从 s3 上的图像中删除它。对其进行了测试,它现在显示在 og 标签上。
请给我一些解决下列问题的建议。
我在获取图像的 og 标签方面遇到了问题。我正在使用 React with Razzle 进行服务器端渲染。所有站点图像都存储在 aws 存储桶中,该存储桶具有 public 访问权限以获取图像。
这些是我通过头盔在特定页面下使用的标签。
<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 bucket link 用于相同图像或不同图像时没用。
我在想的是它不会获取 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 上上传了一张图片并使用了 url 并获得了 og:image。 curl 响应是
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 上传的并且有同样的问题。
最好和最有效的方法是什么
真可惜没人推荐我
那么我的发现和解决我问题的解决方案是,当我们将 base64 图像从服务器上传到 s3 时,图像上附加了一个 header,即
content-encoding: base64
我们需要从 s3 上的图像中删除它。对其进行了测试,它现在显示在 og 标签上。