Блог

Главная - Вопросы по программированию - Изображение не отображается в react-native, но все остальные данные отображаются

Изображение не отображается в react-native, но все остальные данные отображаются

#javascript #reactjs #react-native

#javascript #reactjs #react-native

Вопрос:

Пожалуйста, у меня есть карта, на которой будут отображаться данные из моей базы данных, проблема в том, что изображение не отображается, но оно отображает остальные данные.

 <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>
  );
}

Комментарии:

1. Необходимо указать, как вы отображаете изображение в своем компоненте card.

2. не могли бы вы показать мне card код компонента

3. Я добавил его. Спасибо

Ответ №1:

Если вы используете эмулятор Android, вы должны использовать 10.0.2.2 для доступа к localhost на вашем ПК. и если вы используете реальное устройство, вам нужно быть в той же сети Wi-Fi и использовать 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