Javascript 尝试从本地JSON文件调用图像时，将不会加载图像

我能够从我在RN中创建的本地JSON文件中动态引入数据。但是，当我返回并为每个配置文件插入一个图像，以便可以动态地显示它们的配置文件信息时，应用程序就断言“组件不能包含孩子。如果您想在图像的顶部呈现内容，请考虑使用”。 我已经为所有的配置文件使用了背景，所以我真的不明白它在说什么，因为我在JSON文件中输入的图像将是每个字符的配置文件图像。我是否按照正确的格式调用图像？任何帮助都将不胜感激

以下是我设置JSON文件的方式：

  const characters = [
      { id: "1", name: "Homer Simpson", occupation: "Nuclear Safety Inspector", 
        url:
          "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png"
       },
      { id: "2", name: "Marge Simpson", occupation: "Stay-at-home mom", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png"},
      { id: "3", name: "Bart Simpson", occupation: "Student", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" },
      { id: "4", name: "Lisa Simpson", occupation: "Student", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" },
      { id: "5", name: "Maggie Simpson", occupation: "Baby", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" }

 export default characters;

我就是这样把它带进来的：

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  Button,
  ImageBackground
} from "react-native";
class CharacterProfiles extends React.Component {
  static navigationOptions = {
    title: "The Simpsons",
    headerStyle: {
      backgroundColor: "#53b4e6"
    },
    headerTintColor: "#f6c945",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };
  render() {
    const { item } = this.props.navigation.state.params;
    return (
      <View>
        <ImageBackground
          source={{
            uri:
              "https://backgrounddownload.com/wp-content/uploads/2018/09/simpsons-clouds-background-5.jpg"
          }}
          style={{ width: "100%", height: "100%" }}
        >
          <Image>{item.url}</Image>
          <Text>Name: {item.name}</Text>
          <Text>Occupation: {item.occupation}</Text>
          <Button
            title="Character Directory"
            onPress={() => this.props.navigation.navigate("CharacterDirectory")}
          />
          <Button
            title="Homepage"
            onPress={() => this.props.navigation.navigate("Home")}
          />
        </ImageBackground>
      </View>
    );
  }
}
export default CharacterProfiles;

从“React”导入React；
进口{
看法
文本，
样式表，
形象,，
按钮
图像背景
}从“反应本族语”；
类CharacterProfiles扩展了React.Component{
静态导航选项={
标题：“辛普森一家”，
头型：{
背景颜色：“53b4e6”
},
标题颜色：“f6c945”，
头饰样式：{
fontWeight：“粗体”
}
};
render（）{
const{item}=this.props.navigation.state.params；
返回(
{item.url}
名称：{item.Name}
职业：{item.occulation}
this.props.navigation.navigate（“CharacterDirectory”）}
/>
this.props.navigation.navigate（“Home”）}
/>
);
}
}
导出默认字符配置文件；

与使用

ImageBackground

组件相同，您需要使用

source

属性来分配

图像的URL。您可以在React Native的中看到更详细的示例



将源URL作为文本包含在
标记的内容中不会有任何效果。这样做本质上等同于在HTML中编写以下内容：

<img>https://example.com/myImage.png</img>

https://example.com/myImage.png

您将收到关于将内容放在图像顶部的警告，因为React Native认为您试图将URL作为文本叠加到图像上。由于HTML
元素不能这样做，
图像
组件也不能这样做。
就像您已经使用
图像背景
组件那样，您需要使用
源
属性来分配
图像的URL
。您可以在React Native的中看到更详细的示例



将源URL作为文本包含在
标记的内容中不会有任何效果。这样做本质上等同于在HTML中编写以下内容：

<img>https://example.com/myImage.png</img>

https://example.com/myImage.png

您将收到关于将内容放在图像顶部的警告，因为React Native认为您试图将URL作为文本叠加到图像上。由于HTML
元素无法做到这一点，图像组件也无法做到。
我们可以看到组件的内容吗？@florian它只是每个字符的png图像。如果您查看我的json文件，您可以复制并粘贴它以查看图像。不确定这是否符合您的要求。对不起，我指的是组件的内容？我们可以看到组件的内容吗？@florian它只是每个字符的png图像。如果您查看我的json文件，您可以复制并粘贴它以查看图像。不确定这是否符合您的要求。抱歉，我指的是的内容？最初尝试在JSON中使用source属性，但没有成功。然而，你的移植成功了，现在有了意义。再次感谢。最初尝试在JSON中使用source属性，但没有成功。然而，你的移植成功了，现在有了意义。再次感谢你。