如何用require()显示动态图片（附代码）

我正在从api获取数据，然后我想根据api数据中的符号显示图像

{apiData ? (
    apiData.data.map((item, key) => (
      <Listing symbol={item.symbol} path={`../images/${item.symbol}.png`} />
    ))
  ) : (
    <></>
  )}

发送路径和符号到另一个组件VVVV。

const Listing = ({ symbol, path }) => {
  return (
    <View style={tw`flex-row justify-between p-10`}>
      <View style={tw`flex-row items-center`}>
        <Text style={tw`mr-2`}>{symbol}</Text>
        <Image source={require(path)} style={{ width: 50, height: 50 }} />
        <Text>{path}</Text>
      </View>
    </View>
  );
};

是否有办法这样做，或者我必须使用其他东西？