渲染平面列表时缺少图像

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 服务器渲染 您应该在图像名称前添加前缀。

希望这可以帮助您理解。