React-Native/Android 显示本机图片/设备内存文件目录中的图片

最新推荐文章于 2022-12-28 09:07:41 发布

玲～～

最新推荐文章于 2022-12-28 09:07:41 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 前端踩坑文章标签： reactjs react native

本文链接：https://blog.youkuaiyun.com/violin256/article/details/116088386

前端踩坑同时被 2 个专栏收录

4 篇文章

订阅专栏

React

2 篇文章

订阅专栏

在React-Native项目中，使用Image组件显示本地图片时遇到问题。原本尝试通过`file:///image/1.jpg`引用图片，但在真机平板上无法显示。解决方案是添加路径前缀`file:///storage/emulated/0/`，正确路径为`file:///storage/emulated/0/image/1.jpg`。注意，`file:///storage/emulated/0/`是安卓设备的根目录，避免路径误解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想在React-Native 项目中，用Image标签显示本地图片,我的真机测试中，平板的根目录有image文件夹，image文件夹有名字为1.jpg的图片，想要显示该图片，但是路径如下却显示不了。

<Image style={{width: 400, height: 200}}
       source={{uri: `file:///image/1.jpg`}}
/>

解决办法
路径加上"storage/emulated/0/"

import { Image} from "react-native";
......
<Image style={{width: 400, height: 200}}
       source={{uri: `file:///storage/emulated/0/image/1.jpg`}}
/>

坑：file:///storage/emulated/0/ 为设备文件管理的根目录，在安卓的文件目录中，根目录有storage目录，目录里有emulated ，emulated里又有0目录，以为file:///storage/emulated/0/是这个目录的路径，谁知道这个就是设备的根目录，有误导的意思。