图像未以 react-native 显示，但所有其他数据显示答案

【问题标题】：Image not displaying in react-native but all other data does图像未以 react-native 显示，但所有其他数据显示
【发布时间】：2020-12-14 09:50:33
【问题描述】：

请给我一张卡片，它会显示我数据库中的数据，问题是它不显示图像，但它显示了其余数据。

<FlatList
        data={getListingsApi.data}
        keyExtractor={(listing) => listing.id.toString()}
        renderItem={({ item }) => (
          <Card
            title={item.title}
            subtitle={"₦" + item.price}
            date={item.date_of_event}
            imageUrl={item.photo}
            category={item.category}
            onPress={() => navigation.navigate(routes.LISTING_DETAILS, item)}
          />

这是我登录时它如何显示的图像 url - "照片": "http://127.0.0.1:8000/media/posts/n3.jpg",

卡片组件：

function Card({ title, subtitle, date, category, imageUrl, onPress }) {
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.card}>
        <Image
          style={styles.image}
          tint="light"
          preview={{ uri: imageUrl }}
          uri={imageUrl}
        />
        {/* <Image style={styles.image} source={image} /> */}

        <View style={styles.detailContainer}>
          <AppText style={styles.title}>{title}</AppText>
          <AppText style={styles.subtitle}>{subtitle}</AppText>
          <AppText style={styles.subtitle}>{date}</AppText>
          <AppText style={styles.subtitle}>{category}</AppText>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}

【问题讨论】：

需要包含您在卡片组件中显示图像的方式。
你能给我看看card组件的代码吗
我已经添加了。谢谢

标签： javascript reactjs react-native

【解决方案1】：

如果你使用的是安卓模拟器，你必须使用10.0.2.2 来访问你电脑上的本地主机。如果您使用的是真实设备，那么您需要在同一个 wifi 网络上，并且必须使用您 PC 的 ip 而不是localhost

但仍然有多种技巧可以显示来自各种来源的图像。

图片显示来自项目的资产文件夹：

<Image
  source={{ uri: 'asset:/app_icon.png' }}
  style={{ width: 40, height: 40 }}
/>

图片来自网络：

<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
   style={{width: 400, height: 400}} />

来自 base64 图像数据：

<Image style={{
    width: 51,
    height: 51,
    resizeMode: 'contain'
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
  }}
/>

有关图片的更多信息在此链接上：React native Image

【讨论】：