我想在我的反应本地项目中使用的图像文件。

I am trying to use some images in my react-native project.

我的项目结构如下：

./index.android.js

./images/icon.png

我想index.android.js内的视图中加载图像：

I am trying to load the image within a view within index.android.js:

<View>
        <Image
          source={require('./images/icon.png')}
          style={styles.icon}
        />
</View>

我知道图像被发现的，因为我没有得到任何错误（如果我尝试需要一个不存在的图像我做的）。但尽管如此，影像不加载，这是一个空的对话框，在其中的形象应该是。

I know that the images are found, because I am not getting any errors (if I try to require a non-existing image I do). But nevertheless the images are not loaded and it's an empty box where the image should be.

我是什么做错了吗？我使用的反应本地0.15.0，使用移动设备进行测试。

What am I doing wrong? I am using react-native 0.15.0, using a mobile device for testing.

更新：

于是我发现了这个我的build.gradle文件中对我的应用程序：

So I found this within my build.gradle file for my app:

 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",

我的图片都不是文件夹中。我想这就是问题所在？

My images are not in that folder. I suppose that's the problem?

推荐答案

您运行的是Windows？我遇到了这个相同的问题，它原来是一个错误包装机/反应，打包/ src目录/捆扎机/ index.js 如何与资产URL路径正在被产生的。它使用路径模块到本地文件路径转换为URL路径，但在路径模块返回与本地路径的路径分隔符。在Windows上，你最终无效的URL路径，由于有反斜杠而不是斜杠的路径。速战速决这是替代用斜杠反斜杠。

Are you running Windows? I ran into this exact same issue and it turned out to be a bug in packager/react-packager/src/Bundler/index.js with how the asset URL path is being generated. It's using the path module to convert the local file path to a URL path but the path module returns paths with native path separators. On Windows, you end up with invalid URL paths due to the paths having backslashes rather than slashes. A quick fix for this is to replace backslashes with slashes.

请参阅文件中DIFF详情我拉的请求。

See the file diff in my pull request for details.

https://github.com/facebook/react-native/pull/ 4416 /文件