无法在 React Native 中渲染图像

Question

我正在尝试从本地文件夹加载 JPG 图像到我的 react-native 应用程序中。

图像存储在资产文件夹中，我试图在图像标签中渲染该文件夹

这是我的 JSON 对象

  {
    title: 'Device 2',
    image: '../assets/imgs/device_default.jpg',
    cta: 'View device',
    mac: '1234-xxxx-xxxx-5678'
  },

这是我的代码

<Block flex style={imgContainer}>
   <Image source={{uri: item.image}} style={imageStyles} />
</Block>

此处项目包含道具值。我可以迭代其他值，如 title 和 mac

但无法渲染图像。

谁能帮我解决这个问题？

Answer 1

require 中的动态路径当前不是 supported.The 唯一允许引用包中图像的方法是在源代码中直接写入 require('name-of-the-asset')。

您需要在 json.Check 下面的示例

中添加图片要求

  const Profiles=[
      {
      "id" : "1",
      "name" : "Peter Parker",
      "src" : require('../images/user1.png'),
      "age":"70",
    },
    {
    "id" : "2",
    "name" : "Barack Obama",
    "src" : require('../images/user2.png'),
    "age":"19",
    },
    {
    "id" : "3",
    "name" : "Hilary Clinton",
    "src" : require('../images/user3.png'),
    "age":"50",
    }
]
export default Profiles;

Answer 2

JSON

    title: 'Device 2',
    src : require('../assets/imgs/device_default.jpg'),
    cta: 'View device',
    mac: '1234-xxxx-xxxx-5678'
  },

HTML

<Block flex style={imgContainer}>
   <Image source={item.src} style={imageStyles} />
</Block>

得到精确解

无法在 React Native 中渲染图像

Not able to render image in React Native

react-native

react-native-android