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 }}
          onl oadEnd={() => 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?

CodePudding user response：

const abc = img.toString("base64");

CodePudding user response：

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 }}
        one rror={() => {
          if(!url)
            return
          console.log('Error loading image. Switching to default image')
          setUrl(defaultSrc)
          setHasImgErr(true)
        }}
        onl oad={()=>{
          // 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'
    }
});