渲染平面列表时缺少图像

Question

我正在尝试添加一个不同的图像到我的扁平列表的每个关键字。然而，图像并不是通过渲染项目来显示在屏幕上的，而仅仅是键。图像的来源是正确的，图像的名称也是正确的。你能找出我犯的错误吗？

export default class HomeScreen extends React.Component {
 constructor(props) {
super(props);
this.state = {
  searchText: '',
};
 }

 render() {
//Data can be coming from props or any other source as well
const data = [
  { 
    key: 'Tiago',
    logo: '../assets/athlean_x.png'
  },
  { 
    key: 'Beatriz',
    logo: "euro2020.png"
  },
  { 
    key: 'Ricardo',
    logo: "jamor.png"
  },
  { 
    key: 'Miguel',
    logo: "rock_in_rio.png"
  },
  { 
    key: 'Simão',
    logo: "splash.png"
  },
  { 
    key: 'David',
    logo: "edp_cooljazz.png"
  }
];

const filteredData = this.state.searchText
  ? data.filter(x =>
      x.key.toLowerCase().includes(this.state.searchText.toLowerCase())
    )
  : data;
return (
  <View style={styles.container}>
    <View style={styles.flatlist}>
      <FlatList
        data={filteredData}
        renderItem={({ item }) => (
          <View style={{flexDirection:'row'}}>
            <Image 
              style={{width:50, height:50, alignSelf: 'center', borderRadius:300}}
              source={{uri:item.logo}}/> 
            <Text style={styles.item}>{item.key}</Text>   
          </View>         
        )}
      />
    </View>
  </View>
);
  }

Answer 1

如果你将图片保存在assets文件夹中，你需要这样做，否则，如果你打算直接从https服务器渲染，你应该在图片名称前面添加前缀。

希望这能帮助你理解。