1

画像に URl を入力しようとしています

<Image source={{uri: this.state.imageURL}} style={styles.thumb} />

fetch API を使用してサーバーから画像をリクエストすると、blob が返されます。

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

var imageURL = window.URL.createObjectURL(attachmentBLOB);

imageURL を console.log() すると、次のように出力されます。

blob:http%3A//localhost%3A8081/4ce24d92-0b7e-4350-9a18-83b74bed6f87

エラーや警告は表示されません。画像が表示されないだけです

私はアンドロイドエミュレータを使用しています。

助けてください。前もって感謝します!

4

1 に答える 1

3

解決

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)
 });
},


次に、返された base64Image を画像に次のように入力します

<Image source={{uri: imageBase64}} style={styles.image} />
于 2016-08-06T12:34:20.657 に答える