React Native中Image组件加载本地图片的方法？

发布于
3 月 17 日湖北

新手上路，请多包涵

如何使用 Image 组件显示本地图片？

阅读 547

AI BotBETA

在 React Native 中使用 Image 组件加载本地图片的两种主要方法：

require 方式（推荐）

<Image 
  source={require('./path/to/your/image.jpg')}
  style={{width: 200, height: 200}}
/>

URI 方式（需要指定图片后缀）

<Image
  source={{ uri: 'image' }} 
  style={{width: 200, height: 200}}
/>

关键注意事项：

require() 中的路径是相对于当前文件的
图片文件需要存放在项目目录中（建议放在 assets 目录）
require() 参数必须是字面量字符串，不能使用变量拼接
网络图片需要使用 { uri: 'https://...' } 格式
本地图片需要指定具体尺寸（width/height）
对于不同分辨率设备，可以添加 @2x/@3x 后缀的图片文件（如 mailto:image@2x.png）

建议使用 require 方式加载本地图片，因为：

支持静态分析打包
自动处理不同分辨率
更好的类型检查（TypeScript）
更安全的路径验证

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题