将静态图像添加到 React Native 应用程序 webpack答案

【问题标题】：Adding static images to React Native app webpack将静态图像添加到 React Native 应用程序 webpack
【发布时间】：2016-03-05 00:21:12
【问题描述】：

我使用 react-native-webpack-starter-kit 创建了一个项目，并尝试将静态图像添加到项目中以供使用。

https://github.com/jhabdas/react-native-webpack-starter-kit

我尝试简单地在 .js React 组件（在 src/components 中）旁边添加一个图像文件夹，并尝试了以下操作，但似乎都没有。没有错误消息，但图像只是没有出现。

<Image source={require("image!add_people_icon")} style={styles.icon} />
<Image source={require("image!add_people_icon.png")} style={styles.icon} />
<Image source={require("./images/add_people_icon.png")} style={styles.icon} />

在实际的 xcode 项目中我需要做些什么，例如将图像添加到那里的图像目录中？

我也在使用 webpack / fileloader 来提供图片。

【问题讨论】：

标签： reactjs react-native webpack webpack-dev-server

【解决方案1】：

将图片引用到 require 是错误的...

基本上它会去 Xcode 项目中搜索那些文件所以有两种解决方案

解决方案1：在Xcode Project Image assets中添加相应的图片，然后就可以像上面那样使用了

解决方案2：使用一些cloudinary，它会给你一个绝对的url，我们可以把它当作

<Image style={/*ifneeded*/} source={{uri: ' //specify the url // '}} />

并且图片的样式应该包含高度和宽度

【讨论】：

谢谢，我将图像添加到 Xcode 项目中并且它工作了