How to map over axios array to display image

Question

I want to display an image from my data. It works when I use Flatlist but Flatlist has conflicts with ScrollView, so I had to change my displaying method from Flatlist to mapping with component.

First name renders when I use {profile.first_name}, but the image won't render. I believe the issue is in the source = {} of the Image. I have tried profile.banner_picture and that has not worked either.

  const bannerPicture = () => {
    return profile.map((profile) => {
      return (
        <View key={profile.key} 
        style={{padding: 1}}>
          
          <Image
            source={banner_picture}
            style = {{     
              height: 100,
              width: 100,
            }}/>
            <Text>{profile.first_name}</Text>           
        </View>
      );
    });
  };
  

Answer 1

When I change

source = {banner_picture} 


//to this 


source={{uri: banner_picture}}


// it works

  const bannerPicture = () => {
    return profile.map((profile) => {
      return (
        <View key={profile.key} 
        style={{
          flex: 1,
          height: 400,
          width: 400,
          padding: 1}}>
          
          <Image
            source={{uri: banner_picture}}
            style = {{     
              height: 100,
              width: 100,
            }}/>
            <Text>{profile.first_name}</Text>
        </View>
      );
    });
  };