文档说引用静态图像的唯一方法是使用 require。
但我不确定在哪里反应期望有这些图像。这些示例没有任何域，因此您似乎必须转到 Xcode 并将它们添加到 Images.xcassets，但这对我不起作用。
问问题
140144 次
11 回答
62
使用面向 iOS 的 React Native 0.41（2017 年 3 月），我发现它很简单：
<Image source={require('./myimage.png')} />
图像文件必须与需要它的 .js 文件位于同一文件夹中，“./”才能正常工作。
我不必更改 XCode 项目中的任何内容。它刚刚奏效。
请注意，路径似乎必须以“./”或“../”开头并且是完整的小写。我不确定所有的限制是什么，但是从简单的开始并继续前进。
希望这对某人有所帮助，因为这里的许多其他答案似乎过于复杂并且充满了（顽皮的）场外链接。
更新：顺便说一句 - 官方文档在这里： https ://reactnative.dev/docs/images
于 2017-03-19T12:40:51.547 回答
22
它完全按照您的预期工作。有一个错误https://github.com/facebook/react-native/issues/282阻止它正常工作。
如果您在与 xcode 项目相同的文件夹中有 node_modules（带有 react_native），您可以编辑 node_modules/react-native/packager/packager.js 并进行此更改：https ://github.com/facebook/react-native/拉/286/文件。它会神奇地工作:)
如果您的 react_native 安装在其他地方并且补丁不起作用，请在https://github.com/facebook/react-native/issues/282上发表评论，让他们知道您的设置。
于 2015-03-29T16:11:34.463 回答
8
ES6 解决方案：
import DefaultImage from '../assets/image.png';
const DEFAULT_IMAGE = Image.resolveAssetSource(DefaultImage).uri;
进而：
<Image source={{uri: DEFAULT_IMAGE}} />
于 2020-12-17T10:33:57.490 回答
6
我遇到了同样的问题，直到我意识到我没有将图像放入我的Image.xcassets. 我能够将它拖放到Image.xcassets打开的 Xcode 中，重建后，它解决了问题！
于 2015-12-19T06:45:58.407 回答
6
如果动态加载图像，可以创建一个如下所示的 .js 文件并在其中添加。
export const data = [
{
id: "1",
text: "blablabla1",
imageLink: require('../assets/first-image.png')
},
{
id: "2",
text: "blablabla2",
imageLink: require('../assets/second-image.png')
}
]
在您的组件 .js 文件中
import {data} from './js-u-created-above';
...
function UsageExample({item}) {
<View>
<Image style={...} source={item.imageLink} />
</View>
}
function ComponentName() {
const elements = data.map(item => <UsageExample key={item.id} item={item}/> );
return (...);
}
于 2020-09-01T05:10:25.510 回答
5
从 UIExplorer 示例应用程序：
静态资产应通过前缀
image!和 位于应用程序包中。
所以像这样：
render: function() {
return (
<View style={styles.horizontal}>
<Image source={require('image!uie_thumb_normal')} style={styles.icon} />
<Image source={require('image!uie_thumb_selected')} style={styles.icon} />
<Image source={require('image!uie_comment_normal')} style={styles.icon} />
<Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
</View>
);
}
于 2015-03-27T03:52:41.020 回答
5
我在使用 react-native-navigation 时遇到问题，我创建了自己的标题组件，然后在标题之前的左侧插入了一个图像 - 作为徽标，然后当我触发导航到另一个屏幕然后再次返回时，徽标再次加载，超时接近 1 秒，我的文件是本地的。我的解决方案：
徽标.json
{"file" : "base64 big string"}
应用程序.js
import Logo from '.../Logo.json'
...
<Image source={{uri:Logo.file}} />
于 2018-01-05T16:48:46.953 回答
4
要显示本地文件夹中的图像，您需要写下代码：
<Image source={require('../assets/self.png')}/>
在这里，我将图像放在资产文件夹中。
于 2019-09-02T12:53:16.920 回答
1
我们可以这样做：
const item= {
image: require("../../assets/dashboard/project1.jpeg"),
location: "Chennai",
status: 1,
projectId: 1
}
<Image source={item.image} style={[{ width: 150, height: 150}]} />
于 2021-02-02T20:24:07.173 回答
0
这来自https://github.com/facebook/react-native/issues/282为我工作：
adekbadek 于 2015 年 11 月 11 日发表评论 应该提到的是，您不必将图像放在 Images.xcassets 中 - 您只需将它们放在项目根目录中，然后只需 require('./myimage.png') as @anback写了看看这个 SO 答案和它引用的拉
于 2017-03-04T16:39:40.550 回答
-15
您必须向源属性添加一个具有名为“uri”的属性的对象，您可以在其中指定图像的路径，如以下示例所示：
<Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />
请记住通过 style 属性设置宽度和高度：
var styles = StyleSheet.create({
image:{
width: 360,
height: 40,
}
});
于 2015-03-27T00:21:03.590 回答