反应本机图像未显示

如何解决反应本机图像未显示

我有一个 react-native 应用程序，我在其中循环遍历包含 API 服务器上某些图像的 url 的数组。 问题是这些图像没有显示在设备上。

代码如下：

<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/>

另外，当我登录 url 时，它显示正常，所以问题不存在。如果我尝试在浏览器中打开图像，它也会打开。所以，我不知道为什么它不起作用。

感谢大家的帮助。祝你有美好的一天

解决方法

因此您正在打印 menu.image.url，但将图像源设置为 imageSource。

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

以下内容将解决问题。

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