我想在我的反应本地项目中使用的图像文件。
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 /文件