React-Native，从相对路径加载图像时出错

Question

我刚刚开始摆弄 React-Native，并且对图像组件很着迷。

我正在尝试从相对路径加载图像。 https://github.com/JoeTheDave/LuLaFlow/blob/master/client/Application/Components/LuLaFlow.js

<Image style={styles.logo} source={require('../Content/Images/LulaRoe.jpg')} />

但我收到一个构建错误，指出生成的图像路径是无效目录。

有人可以看一下我的 github 项目并指出我做错了什么吗？

谢谢

Answer 1

您的路径正确，但图像名称中有一个小拼写错误。打包服务器区分大小写，因此 LulaRoe.jpg 需要为 LuLaRoe.jpg。

快速调试资产问题的一个有用技术是尝试使用http://localhost:8081assets/[FullAssetPath]从浏览器获取资产

在您的情况下，当打包程序运行时，导航到此链接，您将看到一个错误，这样您就知道您的路径有问题：

坏：http://localhost:8081/assets/Application/Content/Images/LulaRoe.jpg

导航到此，您现在应该在浏览器中看到您的图像：

好：http://localhost:8081/assets/Application/Content/Images/LuLaRoe.jpg