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

csb00

我能够从我在 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;
火炬

与您对ImageBackground组件所做的相同,您需要使用source属性来分配Image. 您可以在 React Native 的Image 组件文档中更详细地查看此类示例

<Image
  source={{uri: item.url}}
/>

将源 URL<Image>作为文本包含在标记的内容中将不起作用。这样做本质上等同于在 HTML 中编写以下内容:

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

您收到有关将内容放置在图像顶部的警告,因为 React Native 认为您正在尝试将 URL作为文本叠加在图像上。由于 HTML<img>元素不能这样做,Image组件也不能

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

尝试使用 createjs 加载本地 json 文件

来自分类Dev

尝试使用 jquery 从本地目录加载图像

来自分类Dev

JSON文件中的AngularJS缩略图不会加载;如何通过单击缩略图显示大图像

来自分类Dev

SwiftUI:尝试加载本地JSON数据时,我在Canvas中收到预览错误

来自分类Dev

首次尝试时不会加载视频

来自分类Dev

在iOS中重启后尝试从本地路径加载图像失败

来自分类Dev

AngularJs不会从本地“ Maven项目”中加载JSON文件

来自分类Dev

尝试查找本地保存的背景图像时,ERB 文件引发 404

来自分类Dev

来自 JSON 文件的 AngularJS 图像不会使用 ng-src 加载如何显示图像

来自分类Dev

尝试显示一个随机笑话,但问题和答案与我的本地json文件不匹配

来自分类Dev

烧瓶加载本地json

来自分类Dev

尝试使用SSH本地时重置连接

来自分类Dev

Firefox尝试下载本地.swf文件

来自分类Dev

离子不会加载图像

来自分类Dev

在Shinyapps.io上部署后,我的闪亮应用程序不会加载图像,但是在本地完全可以正常运行

来自分类Dev

通过Android中的本地JSON本地图像

来自分类Dev

本地主机:3000将不会更新我的CSS,或者在关闭关闭后删除静态文件时完全不会加载

来自分类Dev

子域会在首次尝试时加载,但此后不会加载(仅台式机)

来自分类Dev

CasperJs从本地文件加载json数据

来自分类Dev

通过服务角度加载本地json文件

来自分类Dev

CasperJs从本地文件加载json数据

来自分类Dev

加载本地json文件到ajax

来自分类Dev

在JS中加载本地json文件

来自分类Dev

AngularJS:从本地json文件加载内容

来自分类Dev

使用JSON文件以HTML格式加载图像

来自分类Dev

尝试在本地提供用户上传的文件时出错

来自分类Dev

如何在React Native中添加本地图像?尝试时出现错误

来自分类Dev

从 JSON 调用图像 url 到 tableview 文件

来自分类Dev

Google Chrome浏览器在离线时不会加载本地主机网站

Related 相关文章

  1. 1

    尝试使用 createjs 加载本地 json 文件

  2. 2

    尝试使用 jquery 从本地目录加载图像

  3. 3

    JSON文件中的AngularJS缩略图不会加载;如何通过单击缩略图显示大图像

  4. 4

    SwiftUI:尝试加载本地JSON数据时,我在Canvas中收到预览错误

  5. 5

    首次尝试时不会加载视频

  6. 6

    在iOS中重启后尝试从本地路径加载图像失败

  7. 7

    AngularJs不会从本地“ Maven项目”中加载JSON文件

  8. 8

    尝试查找本地保存的背景图像时,ERB 文件引发 404

  9. 9

    来自 JSON 文件的 AngularJS 图像不会使用 ng-src 加载如何显示图像

  10. 10

    尝试显示一个随机笑话,但问题和答案与我的本地json文件不匹配

  11. 11

    烧瓶加载本地json

  12. 12

    尝试使用SSH本地时重置连接

  13. 13

    Firefox尝试下载本地.swf文件

  14. 14

    离子不会加载图像

  15. 15

    在Shinyapps.io上部署后,我的闪亮应用程序不会加载图像,但是在本地完全可以正常运行

  16. 16

    通过Android中的本地JSON本地图像

  17. 17

    本地主机:3000将不会更新我的CSS,或者在关闭关闭后删除静态文件时完全不会加载

  18. 18

    子域会在首次尝试时加载,但此后不会加载(仅台式机)

  19. 19

    CasperJs从本地文件加载json数据

  20. 20

    通过服务角度加载本地json文件

  21. 21

    CasperJs从本地文件加载json数据

  22. 22

    加载本地json文件到ajax

  23. 23

    在JS中加载本地json文件

  24. 24

    AngularJS:从本地json文件加载内容

  25. 25

    使用JSON文件以HTML格式加载图像

  26. 26

    尝试在本地提供用户上传的文件时出错

  27. 27

    如何在React Native中添加本地图像?尝试时出现错误

  28. 28

    从 JSON 调用图像 url 到 tableview 文件

  29. 29

    Google Chrome浏览器在离线时不会加载本地主机网站

热门标签

归档