我已经在资产中创建了一个图像文件夹，并在其中保存了一些图片。我想根据我从URL中获取的项目的ID来渲染这些图片，我根据获取的项目的ID重命名了所有这些图片。但它不起作用。有人能帮我弄清楚吗？或者如果你有其他建议，我愿意接受建议？在这里，你可以看到我正在尝试做的事情：

export default function App() {
      const [material, setMateral] = useState([]);
    useEffect(() => {
        axios
          .get("http://localhost:5000/materals/")
          .then((products) => {
            setMaterial(materials.data.response);
          })
          .catch((err) => {
            console.error(err);
          });
      }, []);
return (
    <View style={styles.container}>
    {material.map((material) => {
            console.log(material);
            const { id, name, categories, genders, brands, price } = material;
            <View style={styles.materialsContainer}>
              <View style={styles.materialsItem}>
                <Image
                  source={"../../assets/images/${id}.jpg"}
                  alt={id}
                  style={styles.thumbnail}
                />
                <Text style={styles.box} numberOfLines={1}>
                  ${id}
                </Text>
                <Text style={styles.box}${name}</Text>
                <Text style={styles.box}${categories}</Text>
                <Text style={styles.box}${genders}</Text>
                <Text style={styles.box}${brands}</Text>
                <Text style={styles.box}$ ${price}</Text>
              </View>
            </View>;
          })}
     );
    }

字符串

的数据