-1

I am very new to react, an i have a use case like, getting the books details in a API response with the image. I need to iterate over the response and I need to display the image.

as suggested displaying binary data as image below is the code i have used for this. But image is not displayed. Any suggestions would be appreciated. What Am i doing wrong?

<View>
                <FlatList data={books} renderItem={
                    data => {
                        console.log("data is -? " + books.author);
                        //const buffer = Buffer.from(data.item.image.data, 'binary').toString('base64');
                       /* let image = btoa(
                            new Uint8Array(data.item.image.data)
                                .reduce((d, byte) => d + String.fromCharCode(byte), '')
                        );*/

                        const encoded = data.item.image.data;
                        <View style={styles.imageContainer}>
                            <Image
                                source={{
                                   uri: `data:image/jpeg;base64,${encoded}`
                                } }
                                //source="{URL.createObjectUrl(encoded)}"
                                style={styles.stretch}
                            />
                        </View>
                    }
                } />
                </View>
user5510222
  • 81
  • 1
  • 8

1 Answers1

1

Here am sharing the solution how did solve the problem, hope this might help someone. Just sharing the working code.

<FlatList data={books} keyExtractor={(item, index) => item.id.title+index} 
renderItem={({ item }) =>
         <Item title={item} />
     } />


function Item({ title }) {
  let ed = 'data:image/png;base64,' + title.image.data;
 return (
<View>
                        <Image source={{ uri: ed }} /></View>
);
}
user5510222
  • 81
  • 1
  • 8