从 API 获取图像时，ImageBackground 不显示图像

Question

当我从 API 获取图像源时，即使源存在，图像也不会显示在 ImageBackground 中，但会显示剩余数据，例如列表标题和其他详细信息。

import React, {useState, useEffect}from 'react';
import {
  FlatList,
  ImageBackground,
  Image,
  StyleSheet,
  View,
  TouchableOpacity,
} from 'react-native';
import { Paragraph } from './paragraph';
import { Heading } from './heading';
import { baseStyle, images, theme, routes } from '../config';
import { useNavigation } from '@react-navigation/native';

export const Carousal = ({ data, style, onPress }) => {
  const navigation = useNavigation();

    // const [imageUri, setImageUri] = useState(null);
  
    // useEffect(() => {
    //   fetchImage();
    // }, []);
  
    // const fetchImage = async () => {
    //   try {
    //     const response = await fetch (`$item.listing_image`); // Replace with your image URI
    //     const blob = await response.blob();
    //     const uri = URL.createObjectURL(blob);
    //     setImageUri(uri);
    //   } catch (error) {
    //     console.error(error);
    //   }
    // };


  return (
    // data.length > 0
    // ?
    <FlatList
      horizontal
      style={style}
      data={data}
      showsHorizontalScrollIndicator={false}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => navigation.navigate(routes.VENUE_PROFILE, {item:item})}>
          <ImageBackground
            source={{uri: item.listing_image}}
            style={styles.flatList}
            resizeMode="contain">
            <Heading style={styles.heading}>{item.listing_title}</Heading>
            <View
              style={{
                ...styles.flex,
                marginVertical: baseStyle.marginVertical(5),
              }}>
              <Paragraph style={styles.para}>{item.listing_area}</Paragraph>
              <View style={styles.flex}>
                <Image
                  style={{...styles.img, tintColor: theme.colors.black}}
                  source={images.starIcon}
                  resizeMode="contain"
                />
                <Paragraph style={styles.para}>{item.listing_rating}</Paragraph>
              </View>
            </View>
            <View style={styles.flex}>
              <View style={styles.flex}>
                <Image
                  style={{...styles.img, tintColor: theme.colors.black}}
                  source={images.pinIcon}
                  resizeMode="contain"
                />
                <Paragraph style={styles.para}>{item.listing_category}</Paragraph>
              </View>
              <View style={styles.flex}>
                <Image
                  style={{...styles.img,tintColor: theme.colors.black}}
                  source={images.clockIcon}
                  resizeMode="contain"
                />
                <Paragraph style={styles.para}>{item.listing_time}</Paragraph>
              </View>
            </View>
          </ImageBackground>
        </TouchableOpacity>
      )}
    />
    // :
    // <Text style={styles.flex}> No Record Found </Text>
  );
};

const styles = StyleSheet.create({
  flatList: {
    paddingTop: baseStyle.paddingTop(84),
    paddingLeft: baseStyle.paddingLeft(15),
    paddingBottom: baseStyle.paddingBottom(15),
    paddingRight: baseStyle.paddingRight(44),
    marginVertical: baseStyle.marginVertical(10),
    marginRight: baseStyle.marginRight(10),
    width: baseStyle.width(315),
    height:200,
  },
});

在上面的代码中仅显示所需的样式。 API 响应：

{"id": 20, "listing_area": "Korangi", "listing_category": "食物", "listing_description": "味道不错 ”、“listing_feedback”：5、“listing_image”：“https://www.pexels.com/photo/white-walls-of-buildings-in-town-14200161/”、“listing_location”：“https:// goo.gl/maps/zRVGiY7sBJxseJJCA?coh=178571&entry=tt", "listing_ rating": 4, "listing_time": 10, "listing_title": "Jahanzaib Haleem Korangi 分行"}

Answer 1

代码都很好，但是你的 api 回复 “listing_image”：“https://www.pexels.com/photo/white-walls-of-buildings-in-town-14200161/”， 不是图像 URL，它是网站页面 URL，我使用此 “https://images.pexels.com/photos/14200161/pexels-photo-14200161.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1” 你只需要一个合适的图像URI 如果不在 style 和 check style 中使用 flex ，它可能会起作用。