Javascript 警告：失败的道具类型：为“图像”提供的道具“源”无效。我已在对象中使用require（）保存了图像的路径

当我试图获取js对象中以字符串形式存储并以require（）作为道具的图像路径时，出现了这个错误

Warning: Failed prop type: Invalid prop `source` supplied to `Image`.

CategoriesScreen.js

import React from "react";
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  TouchableOpacity,
} from "react-native";

import { CATEGORIES } from "../Data/Dummy-Data";
import CategoryGrid from "../component/categoryGrid";

const CategoriesScreen = (props) => {
  const renderGridItem = (itemData) => {
    return (
      <CategoryGrid
        title={itemData.item.title}
        imgUrl={itemData.item.url}
//console.log (itemData.item.url)-> require(..) ->image path


        onSelect={() =>
          props.navigation.navigate({
            routeName: "CategoryMeals",
            params: {
              categoryId: itemData.item.id,
            },
          })
        }
      ></CategoryGrid>
    );
  };
  return (
    <View>
      <FlatList data={CATEGORIES} renderItem={renderGridItem} numColumns={2} />
    </View>
  );
};
CategoriesScreen.navigationOptions = {
  headerTitle: "Meals Categories",
};
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    //this is unused till now.
  },
});

export default CategoriesScreen;

category.js

class Category {
  constructor(id, title, url) {
    this.id = id;
    this.title = title;
    this.url = url;
  }
}
export default Category;

CategoryGrid.js

import React from "react";
import {
  TouchableOpacity,
  StyleSheet,
  View,
  Text,
  ImageBackground,
} from "react-native";

const CategoryGrid = (props) => {
  return (
    <TouchableOpacity style={styles.gridItems} onPress={props.onSelect}>
      <View>
        <ImageBackground
          source={props.imgUrl}
          style={{ width: "100%", height: "90%" }}
        />
        <Text>{props.title}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  gridItems: {
    flex: 1,
    margin: 15,
    height: 150,
  },
});

export default CategoryGrid;

从“React”导入React；
进口{
可触摸不透明度，
样式表，
看法
文本，
图像背景，
}从“反应本族语”；
const CategoryGrid=（道具）=>{
返回(
{props.title}
);
};
const styles=StyleSheet.create({
网格项目：{
弹性：1，
差额：15，
身高：150，
},
});
导出默认类别网格；

console.log（）在CategoriesScreen.js和categoryGrid.js->require（../assests/Images/image.jpeg）中表示

我试图将图像路径作为道具从CategoryScreen.js获取到categoryGrid.js，该路径作为对象存储在Dummy-Data.js中

知道我做错了什么吗？

像这样做吧

<ImageBackground
  source={{uri: props.imgUrl}}
  style={{ width: "100%", height: "90%" }}
/>

我已经试过了，但不起作用。我还试图替换

。/assets/Images/image.jpeg中的
props.imgUrl
进行检查，但这也不起作用。请尝试文档，谢谢@Kartikey的帮助。现在。很好用。但是
Hamburgers
行包含语法错误。由于错误，您也忘记删除该行中的引号。非常感谢你的帮助！
<ImageBackground
  source={{uri: props.imgUrl}}
  style={{ width: "100%", height: "90%" }}
/>

import Category from "../Models/category";

export const CATEGORIES = [
  new Category("C1", "Italian", require("../assets/Images/italian.jpeg")),
  new Category("C2", "Indian", require("../assets/Images/Indian.jpeg")),
  new Category("C3", "French", require("../assets/Images/French.jpeg")),
  new Category("C4", "Hamburgers", require("../assets/Images/Hamburgers.jpeg")),
  new Category("C5", "German", require("../assets/Images/German.jpeg")),
  new Category("C6", "Asian", require("../assets/Images/Asian.jpeg")),
  new Category("C7", "Breakfast", require("../assets/Images/Breakfast.jpeg")),
  new Category("C8", "Dinner", require("../assets/Images/Dinner.jpeg")),
];