Question 33853 in React native Question posted in
The official React Native documentation can be found here.

How to convert image bytes to base64 in React Native

After requesting it for the backend, I want to display the product image to the user.

the problem is:
the API response with PNG image found the product image but if the product has no image the API response is with (204 NO Content), so I need to display the default image instead.

after searching I found the defaultSource prop to the <Image> component and it works fine on IOS but in android, it does not.

<Image
          defaultSource={{ uri: productDefaultImage }}
          source={{
            uri: env.apiUrl.concat(env.productImageById.replace(":productId", price.id.toString())).concat("?thumbnail=true"), headers: { Authorization: `Bearer ${token}`}
          }}
          resizeMode="contain"
          style={{ width: 100, height: 70 }}
          onLoadEnd={() => setImageLoading(false)}
        />

some of the returned data from API

�PNG


IHDRww^��   pHYs��IDATx^����wu���9u��=9g͌rH ���1x�1��YG���kÚ�/�ؘl�,!��F��g:��ʹ�����ww�y�����6�����tW=ϭ�{���sϑ�;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;v���#`G���;?�p�d_�
}u?��2�sM8��~ޟ��;>WqZ��.���r>�8
]=���d6�Δ
}��ayB�B��.��|6,�j�dU��Ⱥ��z ����b>^�Y������S�ԂV&�w�r��j��@���7�>���5/��n>��D$���.o���x$���p8�t:�N����������rX��a5̇C!m4�a�T�Ѩ�U����
}������X���;��d�/?��")8j
9<N�5_i�>�����q:��W��uso��;��Gn�9�����?�I�V*�@�R�k
�,�'_s�sU��X����×/�ZҙLK�R�����>W��vW�Paf���4ꞈ�(����ɢ>���,+T�4¹����VP4ȧ�%o�w�Cmr�Z����9i~Z*f�I��3�*�C��T
ٜWV
]��=mr8�R*�GZ�BZ5��&q�R8$�ˣz.�j2)��>���K���H�
2�y4�A����|�&'��jr4�>�ިfT��V�5�?T=
}�J�������3�m�"����ɛ�{,����p���/g|]�wY����ov(�H��V[5������rqi�z>Xp���l �x}*y�H��ΒO�r�Z�NG�^��n�7���m�^�����{�����rj�5,��ҹe��;0�]�M�������B ���G�㎅�3X�T��r���v�*�Z#�u4�+nwЪYy�/P ��9�.��jX^�%ϫVq������獒�

is there’s any way I can display default image in android too?

Tags:

2

Answers


  1. 0 
    const abc = img.toString("base64");
    Login or Signup to reply.
  2. 0

    If you move your uri into a piece of state then you can use the onError callback to set the uri to your default url ( a demo):

    import React, { useState } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';

const defaultSrc =
  'https://media.istockphoto.com/id/1271122894/photo/planet-earth-from-the-space-at-night.jpg?s=612x612&w=0&k=20&c=PU-_OdSqlMs47X3FKQQBEruZcI38QJ4XLPpYi9b7dJ4=';

export default function App() {
  const [url, setUrl] = useState('');
  const [text, setText] = useState('');
  const [hasImageErr,setHasImgErr] = useState(false)
  return (
    <View style={styles.container}>
      <TextInput
        label="Paste a url"
        value={text}
        onChangeText={setText}
        right={
          <TextInput.Icon
            icon="check"
            color="green"
            onPress={() => setUrl(text)}
          />
        }
      />
      {hasImageErr &&<Text style={styles.errText}>Error loading image</Text>}
      <Image
        style={styles.image}
        source={{ uri: url }}
        onError={() => {
          if(!url)
            return
          console.log('Error loading image. Switching to default image')
          setUrl(defaultSrc)
          setHasImgErr(true)
        }}
        onLoad={()=>{
          // called when image loading succeeds
          if(defaultSrc !== url)
            setHasImgErr(false)
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  image:{
    margin:5,
    width:100,
    height:100,
    alignSelf:'center'
  },
  errText:{
    color:'red',
    alignSelf:'center'
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search