在 React Native 中显示来自 firebase cloud firestore 的图像，图像参考不起作用

Question

我正在尝试使用存储在 firestore 数据库中的引用访问本地存储的图像。第二个文本行显示了我存储在 firestore 数据库中的内容。当我将此文本直接放入 Image 组件时，它可以工作并显示图像。但是，当使用 categories.Image 引用图像时，我收到警告“道具类型失败：无效道具 source 提供给 Image 并且图像未显示

import {View, Text, Image} from "react-native";
import styles from "../../src/styles/MainStyle";
import {useEffect, useState} from "react";
import {collection, getDocs} from "@firebase/firestore";
import {db} from "../../db/firebase-config";
import quizScreen from "../../src/styles/ScreenStyles/QuizScreen";

export default function Testread({navigation}) {
    const [categories,setCategories] = useState([]);
    const databaseCollectionRef = collection(db, "Categories")

    useEffect(() =>{
        const getCategories = async () => {

            const data = await getDocs(databaseCollectionRef)
            setCategories(data.docs.map((doc)=>({...doc.data(), id: doc.id})))

        }
        getCategories()
    }, [])
    return (
        <View style={styles.container}>

            {categories.map((categories) => {return <View>
                <Text>Name:{categories.Title}</Text>
                <Image style={quizScreen.picture} source={categories.Image} />
                <Text>Image: {categories.Image}</Text>
            </View>})}
            <Image style={quizScreen.picture} source={require('../../assets/images/Geography.png')} />
        </View>
    );
}

应用运行时的图片： https://i.stack.imgur.com/2nJLl.png

Answer 1

您可能将未定义传递给图像源尝试在源中使用条件以避免传递未定义