React Native using axios to display image-CodePudding

I want to display image encoded in base64 in json file using AXIOS. But I do not know how to do it correctly. At the bottom I throw in a code snippet how I retrieve data from the API and how I display it with AXIOS.

    const [data, setData] = useState([])
    
    useEffect(() => {
        axios.get('https://api.npoint.io/ddba9b527b972abc4a90')
            .then(({data}) => {
                console.log("LiquorApp -> data", data.products)
                setData(data.products)
            })
            .catch((error) => console.error(error))
    }, []);

    const Card = ({item}) => {

        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => (navigation.navigate('Details', item))}>

                <View style={style.card}>

                    <View style={{height: 100, alignItems: 'center', justifyContent: 'center'}}>
                        <Image
                            style={{flex: 1, resizeMode: 'contain'}}
                            // display here source={item.img}
                        />
                    </View>
            </TouchableOpacity>
        );
 }

The data display works fine but I don't know how to do it for an encoded image.

@edit I change the api data to normal url like this

"url": "https://i.imgur.com/eGUilqS.png"

I tried to display it this way but it doesn't work.

<Image source={{uri: `${item.url}`}}/>

CodePudding user response：

You need to add this before the base64Encoded

<Image source={{uri: `data:image/png;base64,${encodedBase64}`}} />

CodePudding user response：

@fixed I had to add a style that determines the height and width of the picture.

style={{width: 200, height: 200}}