React-Native: загрузить изображение из хранилища Firebase

Предварительная информация:

У меня все еще открыт проект Firebase, и я все еще успешно использую базу данных Firebase (Итак, firebase.initializeApp(config) работает). Я загрузил несколько изображений в свое хранилище Firebase в папку «/ Images /» и назвал их image1.jpg, image2.jpg, ..

React-Native: 0.31.0, Firebase: 3.3.0

Чего я хочу:

Я хочу получить изображение из хранилища Firebase и поместить его в <Image>

Что я на самом деле сделал:

var storageRef = firebase.storage().ref('Images/image1.jpg');

//1. Try:
storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//2. Try:
var sampleImage = storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//3. Try:
var sampleImage = storageRef.getDownloadURL();

Информация о коде:

  1. Код не достигает точки console.log(url)

    2.1. Пытался использовать sampleImage как source в объекте <Image>: пустое изображение

    2.2. Пытался log sampleImage: undefined

    2.3. Пытался log url: не дошло до этого момента

    3.1. Пытался использовать sampleImage как source в объекте <Image>: пустое изображение

    3.2. Пытался log sampleImage: { F: 0, ka: undefined, o: { F: 0, ... } }

Все попытки вернули один и тот же код ошибки через 2-3 минуты.

Хранилище Firebase: превышено максимальное время повтора операции, повторите попытку.

Заранее большое спасибо за вашу помощь.


react-native firebase javascript firebase-storage image
person Jonathan Stellwag    schedule 08.09.2016    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Ваш первый кажется правильным на основе документации. Я считаю, что вы получаете сообщение об ошибке, поэтому также подключите обратный вызов ошибки:

storageRef.getDownloadURL().then(function(url) {
    console.log(url);
}, function(error){
    console.log(error);
});

См. https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getDownloadURL

person Mathew Berg    schedule 08.09.2016

arrow_upward
4
arrow_downward

Обновить

Я сообщил об этой проблеме в службу поддержки Firebase и получил следующий ответ:

Наши инженеры вернулись, и похоже, что это проблема, связанная с Android (работает на iOS) [..] В настоящее время мы работаем над этим, но что касается графика, мы не можем поделиться чем-либо на данный момент

Исследования

Похоже, что это настоящая ошибка, вызванная срабатыванием XMLHttpRequest response-native. При попытке использовать getDownloadURL () таким же образом, как вы описываете, происходит то же самое (т. Е. Достигнуто максимальное время повтора).

Однако при переопределении полифила XMLHttpRequest в response-native, как описано в этот поток переполнения стека getDownloadURL () завершится нормально и вернет действительный URL.

Мы используем react-native v0.33.0, Firebase v3.4.1

Временное решение

Тем временем мы использовали этот обходной путь; в обход Firebase API:

var bucket = firebase.storage().ref().bucket;
var firebaseUrl = "https://firebasestorage.googleapis.com/v0/b/" + bucket + "/o/";
var finalUrl = firebaseUrl + 'path%2Fto%2Fresource';
firebase.auth().currentUser.getToken()
.then((token) => {
  fetch(finalUrl, {headers: {'Authorization' : 'Firebase ' + token}})
  .then((response) => response.json())
  .then((responseJson) => {
    var downloadURL = finalUrl + "?alt=media&token=" + responseJson.downloadTokens})
  })
});

Это проблема, которая, кажется, затрагивает небольшое количество пользователей, поскольку я видел только проблему, возникшую в противном случае здесь. Однако, похоже, это настоящая ошибка, и когда она возникает, это очень изнурительно, поэтому мы будем очень благодарны за любой дополнительный ввод.

person Christian Barth Roligheten    schedule 09.10.2016
comment
Спасибо за подробный ответ. На данный момент у меня нет времени тестировать это решение, и я нашел обходной путь (взяв прямой URL-адрес изображения), но я постараюсь как можно быстрее. Заранее спасибо. BR Джонатан - person Jonathan Stellwag; 13.10.2016
comment
У меня не сработало: ReferenceError: выборка не определена. - person Guto Marrara Marzagao; 30.10.2017
comment
Я понял. Я тестировал только с помощью node.js (не реагировал на родной). Функция fetch загружается с зависимостями от react native. - person Guto Marrara Marzagao; 31.10.2017

arrow_upward
0
arrow_downward

КАК получить все изображения из хранилища

firebase.storage().ref().child('filename').list().then(result => {
    // Loop over each item
    result.items.forEach(pics => {
        firebase.storage().ref().child(pics.fullPath).getDownloadURL().then((url) => {
            console.log(url);
            //these url will be used to display images
         })
     });
})
person Nehal Shrivashtava    schedule 27.07.2020