Как загрузить файл изображения в firebase

Вам не нужно добавлять data:image/jpeg;base64, если это URL-адрес изображения. Вы можете просто использовать <Image source = {{uri: image_url}} />

Проблема в этой части кода:

return (<Image source = {{ uri: "data:image/jpeg;base64," + image_url }} />)

Компонент React Native Image поддерживает только следующие способы рендеринга изображения:

Во-первых, локальное изображение (т.е. в папке вашего проекта):

<Image source = {require('...')} />

Во-вторых, данные изображения (т.е. данные base64, где у вас уже есть данные)

<Image source = {{ uri: 'data:image/jpg;base64,vncowi342r27yvb...' }} />

В-третьих, локальные изображения на телефонах пользователей

<Image source = {{ uri: 'file://...' }} />

В-четвертых, удаленное изображение (т. Е. URL-адрес загрузки)

<Image source = {{ url: 'https://...' }} />

Способ рендеринга изображения не соответствует ни одному из шаблонов, потому что для 2 у вас уже должны быть данные для рендеринга изображения. Итак, вот 2 способа решения проблемы

Метод 1. Если вы не хотите менять способ загрузки изображения (чего я не рекомендую, просто потому, что для вас гораздо больше работы, вы поймете почему), тогда у вас должно быть состояние под названием imageData, которое удерживает данные base64 изображения, которое вы хотите визуализировать, затем передайте им данные, как только вы загрузили их из firebase следующим образом:

state = {
    imageData: '',
    ...
    ...
}

componentDidMount() {
    fetchImage()
}

fetchImage() {
    var gsReference = storage.refFromURL('gs://SOME_ADDRESS')
    gsReference.getDownloadURL()
        .then((url) => { return fetch(url) })    // Use react native's fetch API
        .then((response) => { return response.json() })
        .then((data) => this.setState({ imageData: data }))
}

render() {
    const { imageData } = this.state

    return (
        <View>
            {imageData !== '' && <Image
                source = {{ uri: 'data:image/jpeg;base64,' + imageData }}
            />}
        </View>
    )
}

Метод 2. Загрузите изображение в виде большого двоичного объекта с модулем react-native-fetch-blob.

import RNFetchBlob from 'react-native-fetch-blob';    

const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

// Upload method
// 'path' is the path of the image you want to upload, for example, it
// could look like this: 'file://...', i.e. an image picked from user's phone
function uploadImage(path) {
    let imageFile = RNFetchBlob.wrap(path);
    const imageRef = firebase.storage().ref('.../.../.../')
    let uploadBlob = null

    Blob.build(imageFile, { type: 'image/jpg' })
        .then((imageBlob) => {
            uploadBlob = imageBlob;
            return imageRef.put(imageBlob, { contentType: 'image/jpg' });
        })
        .then(() => {
            uploadBlob.close();
            return imageRef.getDownloadUrl()
        })
        .then((url) => {
            // Do something with the url, e.g. store it in database
        })
        .catch(() => { ... });
}

После того, как вы загрузили свои изображения в виде капель, все готово, визуализируйте изображение следующим образом:

<Image source = {{ uri: '<url>' }} />

Шаг 1: инициализировать настройку хранилища firebase

Шаг 2: следовать этому коду

handleSubmit = (imageFile) => {
const imageUpload = storage.ref(`images/${imageFile.name}`).put(imageFile);
imageUpload.on(
  'state_changed',
  (snapshot) => {
    //process fun here  
      console.info(snapshot);
    }
  },
  (error) => {
     //error fun here 
      console.info(error);       
    }
  },
  () => {
    storage
      .ref('images')
      .child(imageFile.name)
      .getDownloadURL()
      .then((url) => {
        console.info(url);            
      });
    }
   );
 };

return url - это URL нашего изображения