React-Native -Elements Avatar not rendering and showing only gray background even though the image path is correct

Question

I am trying to render the avatar in my listItem in my React_Native Application but the image is not rendering even though my image URI path is correct and it's only giving the gray background.

Here is my code

<View>
      {props.dishes.map((l, i) => (
        <ListItem key={i} bottomDivider>
          <Avatar rounded source={{ uri: l.image }} />
          <ListItem.Content>
            <ListItem.Title>{l.name}</ListItem.Title>
            <ListItem.Subtitle>{l.description}</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      ))}
    </View>

Here is the image of what I am getting

I want the images to be rendered there but it's showing only a grey background. I also tried putting the URI of online images but it's giving the same result.

I also followed the solutions mentioned here but it is not working.

I also passed the online uri to check if my path uri is incorrect but it the same result

<Avatar
     source={{
              uri:"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",        
            }}
          />

Answer 1

I solve the issue as passing the path of the image like this was not working Bypassing an image path like this was rendering only grey background.

<Avatar rounded source={{ uri: "./images/uthappizza.png"}} />

This is how I passed the image path and its rendering properly by using require()

<Avatar rounded source={require("./images/uthappizza.png")} />