画像にURIを入力したい。
サーバーに画像をリクエストすると、BLOBが返されます。
次に、BLOBを次の行のURLに変換します。
var blobUrl = URL.createObjectURL(blob);
次に、画像に次のURLを入力してみます。
<Image source={{uri: blobURL}} style={{width: 100, height: 50}} />
画像は表示されません。私は何をすべきか?
ローカルホストに接続されているAndroidエミュレーターを使用しています。BLOBURLがローカルホストに保存されるため、これと関係がある可能性がありますか?
または、単純な構文エラーである可能性がありますか?
ありがとう。
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} />
react-native-fetch-blob によって解決される可能性があります、それは約 問題#854
ブロブを受け取った後:
let imageUri = "data:image/png;base64," + blob;
<Image source={{uri: imageUri, scale: 1}} style={{height: 30, width: 30}}/>