web-dev-qa-db-ja.com

React-native-URLに変換されたBlobを画像に入力します

画像にURIを入力したい。
サーバーに画像をリクエストすると、BLOBが返されます。

コンソールに表示されたときのBLOB： enter image description here

次に、BLOBを次の行のURLに変換します。

var blobUrl = URL.createObjectURL(blob);

コンソールに表示されたときのblobUrl enter image description here

次に、画像に次のURLを入力してみます。

<Image source={{uri: blobURL}} style={{width: 100, height: 50}} />

画像は表示されません。私は何をすべきか？

ローカルホストに接続されているAndroidエミュレーターを使用しています。BLOBURLがローカルホストに保存されるため、これと関係がある可能性がありますか？

または、単純な構文エラーである可能性がありますか？

ありがとう。

javascriptandroid-emulatorreact-nativeblobreact-native-android
7
Larney

ソリューション

React-Nativeはblobをサポートしていません[参照： Git/React-Native ]。これを機能させるには、base64文字列を返す react-native-fetch-blob をダウンロードする必要がありました。

base64文字列を返す関数：

var RNFetchBlob = require('react-native-fetch-blob').default;

getImageAttachment: function(uri_attachment, mimetype_attachment) {

  return new Promise((RESOLVE, REJECT) => {

    // Fetch attachment
    RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((response) => {

        let base64Str = response.data;
        var imageBase64 = 'data:'+mimetype_attachment+';base64,'+base64Str;
        // Return base64 image
        RESOLVE(imageBase64)
     })

   }).catch((error) => {
   // error handling
   console.log("Error: ", error)
 });
},

base64で画像を入力
次に、返されたbase64Imageを画像に入力します。

<Image source={{uri: imageBase64}} style={styles.image} />
5
Larney

react-native-fetch-blob によって解決される可能性があります、それは約 問題＃854

2
Ferronce Wong

ブロブを受け取った後：

let imageUri = "data:image/png;base64," + blob;

<Image source={{uri: imageUri, scale: 1}} style={{height: 30, width: 30}}/>
2
Jagadish Upadhyay