我在传递 prop 图像时遇到问题，我的代码是否有任何问题？

主屏幕代码：

const HomeScreen = ({navigation}) =>
{

  const [shoes, setShoes] = useState([])
  const [isLoading, setIsLoading] = useState(true)
    const fetchData = async () =>
    {
        const receivedShoes = await fetch(`http://192.168.8.103:8080/shoes`)
        const receivedShoesJSON = await receivedShoes.json()
        setShoes(receivedShoesJSON)
        setIsLoading(false)
    }

    useEffect(() => {
      fetchData();
    });

    return(
      <View style={styles.container}>
        {isLoading ? (<ActivityIndicator/>) :
        (<FlatList data={shoes} keyExtractor={({id}) => id} renderItem={({item}) =>(
          <ShoeDisplay brand = {item.brand} name = {item.name} price = {item.price} image = {item.photoLocation}/>
          )} />
        )}
        <StatusBar style="auto" /> 
      </View>
        
    )
}

photoLocation看起来像这样-“photoLocation”：“../client/public/images/1685958934714.jpeg”
我做的子字符串，因为我想删除../客户端我知道这不是最佳的，但这不是我的问题
我尝试了source={image}，图像为

const image = require(`..` + props.image.substring(9))

这将导致未捕获错误：无法找到模块“../public/images/1685958934714.jpeg”
下面这张

鞋码：

const ShoeDisplay = (props) =>
{

    return(
        <View style={styles.container}>
            <Image style={styles.image} source={{uri:`..${props.image.substring(9)}`}}/>
            <Text style={styles.brand} id="brand">{props.brand}</Text>
            <Text style={styles.name} id="display-title">{props.name}</Text>
            <Text style={styles.price} id="price">€{props.price}</Text> 
        </View>
    )
    
}

这不显示任何错误，但也不显示照片。