Firebase 存储 - URL 用于图像服务

Question

我正在尝试让 Firebase 存储与 Imgix or 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，所以它不会工作，因为我不想要来自 Whosebug 的大量请求。 :)

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

Answer 1

您绝对可以将 Imgix 或 Cloudinary 等服务与 Firebase 存储一起使用 URLs——这里的问题（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/ 等工具测试 URLs 以验证您的图像是否有效。

Answer 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 被正确编码。

Firebase 存储 - URL 用于图像服务

Firebase Storage - URL for image services

firebase

cloudinary

firebase-storage