Firebase 存储 - 图像服务的 URL

Posted 2023-03-25

【中文标题】Firebase 存储 - 图像服务的 URL

【英文标题】：Firebase Storage - URL for image services

【发布时间】：2016-10-08 13:48:30

【问题描述】：

我正在尝试让 Firebase Storage 与 Imgix 或 Cloudinary 等图像服务一起使用。但是，Firebase 提供的下载 URL 似乎不适用于这些服务。

例如：Cloudinary 说您可以像这样获取图像：

http://res.cloudinary.com/demo/image/fetch/http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_C%C3%A9sars_2014.jpg

但是，我的下载 URL 看起来更像这样：

https://firebasestorage.googleapis.com/v0/b/project-503247351211329470.appspot.com/changedsoitdoesnotwork/o/O8Hv4nKOyGgcCyOLoVLH7cQw48y2%2Fimages%2F1.jpeg?alt=media&token=28eabf76-f85b-45aa-das3-fd945729d7c2

我更改了上面 url 中的一些字符，所以它不起作用，因为我不想要来自 *** 的大量请求。 :)

有什么我可以做的不同的事情吗？我可以直接向存储桶提出请求吗？

【参考方案1】：

您绝对可以将 Imgix 或 Cloudinary 之类的服务与 Firebase 存储 URL 一起使用——这里的问题（99% 的情况都是如此）是在获取时需要对 URL 进行百分比转义。

如果我们有这样的 URL：https://firebasestorage.googleapis.com/v0/b/fir-cloudvisiontest.appspot.com/o/images%2Fimage.jpg?alt=media&token=TOKEN

它需要转义为：https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ffir-cloudvisiontest.appspot.com%2Fo%2Fimages%252Fimage.jpg%3Falt%3Dmedia%26token%3D61d35caf-b209-485f-8248-a3c2aa717468（是的，它实际上重新转义了转义的任何百分比编码）。

这将产生一个 Cloudinary URL，如下所示：http://res.cloudinary.com/<your-project>/image/fetch/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ffir-cloudvisiontest.appspot.com%2Fo%2Fimages%252Fimage.jpg%3Falt%3Dmedia%26token%3DTOKEN

鉴于服务对 URL 编码的容忍度不同，您的里程可能会有所不同，因此我建议使用 http://meyerweb.com/eric/tools/dencoder/ 之类的工具测试 URL，以验证您的图像是否有效。

【讨论】：

你好。这对我来说确实适用于 Cloudinary。 :) 因此已经标记为答案。不过，也许您可​​以帮助我解决以下问题：对于 Imgix，它还不起作用。我在看docs.imgix.com/setup/serving-images。我选择“Web 文件夹源”。如果我使用您的示例网址并选择一个域：firebasestorage.googleapis.com/v0/b/…，然后添加如下网址：https://.imgix.net/images%252Fimage.jpg%3Falt%3Dmedia%26token%3DTOKEN 它应该工作对吗？也许你可以提出你的想法，否则我会联系支持。 :)

不确定——我认为它会起作用，尽管我不太熟悉它。使用 Web 代理方法并对其进行签名将是最接近 Cloudinary 解决方案的方法。从长远来看，我希望 imgix 除了支持 S3 存储桶之外，还支持 GCS 存储桶，因为如果他们这样做了，这个问题将得到解决:)

感谢您的回复。我会联系 Imgix 看看他们能不能做点什么。 :)

@Timon 你有没有让 firebase 存储映像与 imgix 一起使用？

@Timon 还有你对 cloudinary vs imgix 的看法

【参考方案2】：

使用任何 cloudinary SDK 时，您可以使用 url() 方法创建获取 URL。以下示例使用javascript SDK：

var cl = cloudinary.Cloudinary.new( cloud_name: "<your cloud>");
var storageRef = firebase.storage().ref();

storageRef.child('images/image.jpg').getDownloadURL().then(function(url) 
  var cloudinary_url = cl.url(url, type: "fetch");
  // Do something with the URL...
  console.log(cloudinary_url);

这将确保 URL 被正确编码。