Firebase存储 - 图片服务的URL

Question

我正在尝试使用像Imgix或Cloudinary这样的图像服务来处理Firebase Storage。然而，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中的一些字符，以便它无法工作，因为我不想从Stackoverflow接收大量请求。 :)

我能做些不同的事情吗？我可以直接向Storage Bucket发出请求吗？

- Timon

Answer 1

您可以绝对使用像Imgix或Cloudinary这样的服务与Firebase Storage 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，以验证您的图片是否起作用。

- Mike McDonald

---

你好。这对于Cloudinary确实适用。 :) 因此已标记为答案。也许您可以帮我解决以下问题：对于Imgix，它还没有起作用。我正在查看https://docs.imgix.com/setup/serving-images。我选择“Web文件夹源”。如果我采用您的示例网址并选择域：https://firebasestorage.googleapis.com/v0/b/fir-cloudvisiontest.appspot.com，然后添加网址：https://<my-project>.imgix.net/images%252Fimage.jpg%3Falt%3Dmedia%26token%3DTOKEN，它应该可以工作，对吗？也许您可以给出您的想法，否则我将联系支持。 :) - Timon

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

谢谢回复。我会联系Imgix，看看他们能否解决这个问题。 :) - Timon

@Timon，你是否曾经成功地将Firebase存储的图像与Imgix一起使用？ - jasan

@jasan，我收到了Imgix的一封电子邮件，他们正在努力实现它。不过，我还没有收到被实现的通知邮件。你可以发送电子邮件到[e-mail]向Imgix支持团队询问此功能。由于我还没有进行比较，所以无法对这些服务发表意见。不过，你可以通过免费试用来测试它们 :)。 - Timon

Answer 2

当使用任何 Cloudinary SDK 时，您可以使用 url() 方法创建一个 fetch 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被正确编码。

- tocker