React Native应用中数据库图片URL首次加载后无法二次渲染

我在React Native中创建了Work.js视图，从Supabase数据库拉取作品集信息，遍历返回的work对象并将数据加载到名为WorkTile.js的卡片式自定义组件中。首次加载时一切正常，但切换到其他视图后返回，数据库拉取的所有文本都能正常显示，唯独图片加载失败。该问题在Android、iOS和Web平台均存在，且无任何报错信息。我尝试过使用useState、AsyncStorage、更换不同Image组件等多种方法，还发现WorkTile.js中打印的data.imageFull仅在首次加载时输出，始终找不到问题根源，恳请帮忙排查！

Work.js 代码 #

import React, { useEffect, useState, useRef } from "react";
import {Text, Flex, Button, Center, Heading, VStack, ScrollView } from "native-base";
import supabase from "../supabase";
import WorkTile from "../components/WorkTile";
import Bowl from "../components/Bowl";

const Work = () => {
    const [works, setWork] = useState([]);
    const componentMounted = useRef(true);
    
    useEffect(() => {
        const fetchWork = async () => {
            const {data, error} = await supabase.from('work').select('*').order('featured', {ascending: false}); //.eq('type', '3D')
            
            if (error) {
                console.log('error', error);
            } else {
                setWork(data);
            }
        };
        if (componentMounted.current) {
            fetchWork();
        }

        return () => {
            componentMounted.current = false; 

        };
    }, []);

    return ( 
        <ScrollView h="100%" w={[400, 480, 640]} style={{ overflowx: "hidden" }}>
            <Bowl />
            <VStack pb={5} pt={0} mt={-200}  justifyContent="space-between">
                <Heading mt={headings.mt} mb={headings.mb} pb={headings.pb} size={headings.size} borderBottomWidth={headings.bbw} borderBottomColor={headings.bbc} alignSelf="flex-start">
                    Work
                </Heading>
                <Text fontSize={16} textAlign="justify">Hello! My name is Jamie and I'm full stack web and app developer based outta Richmond, VA. In my years in marketing I've worn a lot of hats, including designer, developer, systems engineer, photographer, videogropher, project manager, product manager, and solutions architect and I love every minute of it! When I'm not online, you can find me on my bike, on my drumset, or making something on the stove top.</Text>            
            </VStack>      

            {/* Work Component */}
            <Center>
                <Flex flex={1} flexWrap="wrap" flexDirection="row" justifyContent={["center", "center", "space-between"]} >
                    {works.map((work, index) => (  
                        <WorkTile key={work.id} data={work} />
                    ))}
                </Flex>
            </Center>

            <Center>
                <Button mt={12} alignSelf="center" onPress={() => navigation.dispatch( CommonActions.navigate({ name: 'Work',  params: { cameFrom: 'Home' } } ) ) } >
                    Check out my resume ---
                </Button>
            </Center>

            <Center mt={8} mb={6}><Text fontSize={12} color="warmGray.500">© {new Date().getFullYear()} Jamie Taylor. All rights reserved.</Text></Center>

        </ScrollView>
    );
}
 
export default Work;

WorkTile.js 代码 #

import {Text, AspectRatio, Stack, Pressable, Heading } from "native-base";
import { Image } from "react-native";

function WorkTile({data}) {  
    return ( 
        <Pressable mt={5} shadow="2" rounded="lg" w={{ base: 96, md: 72, lg: 48 }} 
            _light={{ bg: "coolGray.50" }} _dark={{ bg: "gray.800" }} overflow="hidden">
            <AspectRatio 
                ratio= {{ 
                    base: 16/9,
                    md: 16/9
                }} height= {{
                    base: 20,
                    md: 20
                }} >
                <Image key={data.id} resizeMode="cover" source={{
                    uri: data.imageFull
                }} alt={data.blurb} />
            </AspectRatio>
            <Text bold position="absolute" color="coolGray.50" top="0" m={3} mt={2}>
                {data.type.toUpperCase()}
            </Text>                       
            <Stack space="2" p="4">
                {/* <Text color="gray.400">{data.created_at}</Text> */}
                <Heading size="md" fontWeight="medium" isTruncated>
                    {data.name}
                </Heading>
                <Text isTruncated noOfLines={[2,4,4]}>
                    {data.blurb}
                </Text>
            </Stack>
        </Pressable>
    );
}

export default WorkTile;

问题截图 #

首次加载正常状态 #

返回后图片加载失败状态 #

内容的提问来源于stack exchange，提问作者Jamie