时间戳

首页 > 解决方案 > 图像未以 react-native 显示，但所有其他数据都显示

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

问题描述

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

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

这是我登录时它如何显示的图像网址 - “照片”：“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>
  );
}

标签： javascriptreactjsreact-native

解决方案

如果您使用的是 android 模拟器，则必须使用它10.0.2.2来访问 PC 上的 localhost。如果您使用的是真实设备，那么您需要在同一个 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

推荐阅读