谷歌云存储图像公开链接到img src

8

你好,我查看了相关问题,但未能找到答案。我想在我的网站上从谷歌云存储中提供公共链接,但它们只能作为下载链接使用。我无法将它们作为img src放置以加载它们。由于CORS,我不能从我的网页js异步下载图像。有没有解决方法?我想知道是否可以先异步定义它们为下载链接,然后强制点击下载它们,然后使用文件阅读器获取blob以用作img src。

更新:我发现出现了一个Chromium问题。我使用带有CORS_Everywhere的Firefox,请求成功了。一旦我的网站上线,图片会有相同的问题吗?还是说CORS只是不接受本地主机?还是与浏览器有关?

谢谢, timecatcher

1个回答

12

我不确定您想做什么。听起来您想在 <img> 标签中显示 GCS 中的图像。对此,您不需要任何 CORS 策略或 JavaScript 技巧,所以我可能误解了您的问题。

要在网站上包含 GCS 图像,请确保该图像是公开可见的,然后只需包含如下图像标记:<img src="https://storage.googleapis.com/BUCKET_NAME/OBJECT_NAME" />

根据评论进行编辑:

如果您上传对象而未指定 Content-Type,则 GCS 默认为通用的 "application/octet-stream"。Web 浏览器通常默认保存 application/octet-stream 响应。如果您想通过 Web 服务提供 JPEG 图像,请确保其 Content-Type 为“ image/jpeg”。

还有一件事:

还有一条路径使用 https://storage.cloud.google.com/ 路径,但那是为用户验证其自己账户的 Google cookies 所使用的,通常您不希望在提供公共内容时依赖于它。请使用 https://storage.googleapis.com


啊!你遇到了一个不同的问题。GCS不会对上传的对象的Content-Type做出任何假设,而这个特定的对象具有默认的Content-Type为“application/octet-stream”。Web浏览器不知道如何呈现它,所以它们会下载它。将对象的contentType更改为“image/jpeg”,它就应该可以正常工作了。 - Brandon Yarbrough
15
谷歌云提供的链接是 https://storage.cloud.google.com/BUCKET/path/to/image.jpg,但正确的链接应该是 https://storage.googleapis.com/BUCKET/path/to/image.jpg。因为这个错误链接让我浪费了4个小时的时间……谢谢你给的答案,它给了我一个想法。 - Oleg Reym
1
救命稻草 @OlegReym - Buthetleon
3
@OlegReym,你节省了我的4小时。谢谢。我建议Brandon将这部分内容添加到他的答案中。 - yihlamur
1
@OlegReym 对我来说完美地运行了。非常感谢。 - singhkumarhemant
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接