React native Image is not showing

Question

I have a react-native app where I am looping through array that contains urls of some images on my API server. The problem is these images are not showing on the device.

Here is the code:

<View style={{...styles.menuList}}>
        {menus && (
          menus.map((menu) => {
            return (
              <TouchableNativeFeedback
                onPress={() => {
                  AsyncStorage.getItem('hideMenuModal').then((value) => {
                    if (value) {
                      setShowMenuChoice(true);
                    } else {
                      setMenuModalVisible(true);
                    }
                  });
                  addSelectedMenu(menu.name);
                }}>
                <View style={styles.menuItem}>
                  <View style={styles.menuImageContainer}>
                    {console.log('Image-url:', menu.image.url)}
                    <Image source={{ uri: menu.image.url }} style={{ width: 32, height: 32 }}/>
                  </View>
                  <Text style={[styles.menuText, {color: theme.baseText}]}>
                    {menu.name}
                  </Text>
                </View>
              </TouchableNativeFeedback>
            )
          })
        )}
<View/>

Also, when I log the url it display normally so the problem is not there. and If I try to open the image in browser it also open. So, I don't know why its not working.

I appreciate your help everyone. Have a nice day

score 0 · Answer 1 · answered Jul 25 '21 at 16:33

0

So you are printing menu.image.url, but setting the image source as imageSource.

{console.log('Image-url:', menu.image.url)}
                    <Image source={imageUrl} style={{ width: 32, height: 32 }}/>

The following will fix the problem.

<Image source={menu.image.url} style={{width:32,height:32}} />

answered Jul 25 '21 at 16:33

Pavindu

2,684
6
44
77

that was a mistake from me I was trying different stuff and forget to change it when posting this. I also tried this solution without using the uri and it didn't work also – SDB_1998 Jul 25 '21 at 16:55
Okay then. Can you post some sample URLs you tried? – Pavindu Jul 25 '21 at 21:41
Sometimes the container styles also make the images disappear. Try commenting the container components and see whether the image is displayed. – Pavindu Jul 25 '21 at 21:42
1

`` | ``. I think the problem is the image is http not https, I read somewhere that react-native doesn't accept http urls. I tried an https image and it worked, so I guess I have to place the images in a cloud image service – SDB_1998 Jul 26 '21 at 07:47

React native Image is not showing

1 Answers1