2016-06-08 38 views
6

Ich versuche, Firebase Storage mit einem Image-Service wie Imgix oder Cloudinary zu arbeiten. Die von Firebase bereitgestellten Download-URLs scheinen jedoch nicht mit diesen Diensten zu funktionieren.Firebase Storage - URL für Image-Services

Zum Beispiel: Cloudinary sagt man Bilder wie diese holen können:

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

jedoch meine Download-URL mehr wie folgt aussieht:

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

Ich habe einige Zeichen in der obigen URL geändert, also wird es nicht funktionieren arbeite, da ich keine gazillion Anfragen von Stackoverflow will. :)

Gibt es etwas, was ich anders machen kann? Kann ich vielleicht Anfragen direkt an den Storage Bucket richten?

Antwort

7

Sie können absolut einen Service wie Imgix oder Cloudinary mit Firebase Storage URLs verwenden - das Problem hier (wie in 99% der Fälle) ist, dass die URL prozentual maskiert sein muss, wenn sie im Fetch verwendet wird.

Wenn wir eine URL wie: https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ffir-cloudvisiontest.appspot.com%2Fo%2Fimages%252Fimage.jpg%3Falt%3Dmedia%26token%3D61d35caf-b209-485f-8248-a3c2aa717468 (ja, es tatsächlich wieder entkommt den entkam jeder Prozent-Codierung): https://firebasestorage.googleapis.com/v0/b/fir-cloudvisiontest.appspot.com/o/images%2Fimage.jpg?alt=media&token=TOKEN

Es benötigt wie etwas entgangen sein.

, die in einer Cloudinary URL ergeben, die wie folgt aussieht: 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

Aufgrund Service Unterschiede in der Toleranz für URL-Codierung, die Leistung kann variieren, so empfehle ich testen URLs mit einem Tool wie http://meyerweb.com/eric/tools/dencoder/, um zu überprüfen, dass Ihre Bilder arbeiten .

+1

Hallo. Das funktioniert in der Tat für Cloudinary. :) Daher schon als Antwort markiert. Vielleicht könntest du mir mit folgendem helfen: Für Imgix funktioniert es noch nicht. Ich schaue auf https://docs.imgix.com/setup/serving-images. Ich wähle "Web Folder Sources". Wenn ich Ihre Beispiel-URL nehme und eine Domain auswähle: https://firebasestorage.googleapis.com/v0/b/fir-cloudvisiontest.appspot.com und dann die URL wie folgt hinzufügen: https: // .imgix.net/images % 252Fimage.jpg% 3Falt% 3Dmedia% 26token% 3DTOKEN sollte es richtig funktionieren? Vielleicht kannst du deine Gedanken geben, sonst werde ich den Support kontaktieren. :) – Timon

+0

Nicht sicher - ich würde annehmen, dass es funktionieren würde, obwohl ich nicht damit vertraut bin. Die Verwendung der Web-Proxy-Methode und deren Signatur wäre der Cloudinary-Lösung am nächsten. Langfristig hoffe ich, dass imgix GCS-Buckets zusätzlich zu S3-Buckets unterstützt, da dieses Problem gelöst wäre, wenn sie es taten :) –

+1

Danke für die Antwort. Ich werde Imgix kontaktieren und schauen, ob sie etwas dagegen tun können. :) – Timon

2

Wenn Sie eines der Cloudinary-SDKs verwenden, können Sie eine Abruf-URL mit der Methode url() erstellen. Das folgende Beispiel verwendet die 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); 
} 

Dadurch wird sichergestellt, dass die URL richtig kodiert.