如何在本机反应中显示来自firebase的图像网址答案

【问题标题】：How to display image url from firebase in react native如何在本机反应中显示来自firebase的图像网址
【发布时间】：2021-05-24 01:02:18
【问题描述】：

我想向 firebase 图像添加一个静态 url 并将其显示在 <Image source={item.image} /> 上。因此，对于我想在我的应用程序上显示的每个食谱，我从 firebase 添加它，名称类别所有详细信息都添加到 firebase 中，并且我只是在我的应用程序中映射并显示所有食谱，但图像不显示。

这就是我的 firebase 图片网址的样子：

现在我正在尝试获取该网址并将其添加到<Image source={item.image} />，方法是这样映射：

getCollection = querySnapshot => {
    const RecipeArr = [];
    querySnapshot.forEach(res => {
      const { name, category, description, preptime, image } = res.data();
      RecipeArr.push({
        key: res.id,
        res,
        name,
        category,
        description,
        preptime,
        image,
      });
    });
    this.setState({
      RecipeArr,
      isLoading: false,
    });
  };

并显示如下：

{this.state.RecipeArr.map((item, i) => {
          return (
            <List>
            <Image source={{uri:item.image}} resizeMode="cover" />
            <ListItem
              style={{backgroundColor: 'red'}}
              key={i}
              chevron
              bottomDivider
              title={item.name}
              subtitle={item.preptime}
              onPress={() => {
                this.props.navigation.navigate('RecipeDetailScreen', {
                  Recipekey: item.key,
                });
              }}
            />
            </List>

显示{item.name} 和{item.preptime}，但不显示图像。我做错了什么。

编辑

通过删除 {uri} 并添加宽度和高度来解决这个问题 <Image source={item.image} style={styles.image} />

【问题讨论】：

Image 组件的定义是什么？你确定不是 src 而不是 source？
试过source和src还是不显示图片

标签： javascript firebase react-native google-cloud-firestore

【解决方案1】：

我看不出这里有什么问题。您是否尝试过 console.log() 来查看图像是否真的在数组中？

【讨论】：

我在图片链接下方未定义
我听起来可能是您的查询有问题。你能把那部分贴出来吗？

【解决方案2】：

为图像指定高度/宽度样式并验证正确的 URL 是否出现在您的 item.image 中。

【讨论】：