从WebView中加载本地图片文件

Question

从WebView中加载本地图片文件

9

我有一个React Native的WebView，运行一个小的HTML文档，该文档显示一些图片。我的希望是展示位于应用程序“文档”文件夹中的图片，即这些图片不是静态资源，而是在运行时由应用程序下载并存储在磁盘上。然后，在React Native的WebView内运行的HTML中引用这些图像。到目前为止，我尝试了以下方法：

直接获取文件

我尝试从WebView中获取文件，但失败了（404未找到）：

1.模拟器

::1 - - [25/Nov/2016:09:55:52 +0000] "GET /Users/me/Library/Developer/CoreSimulator/Devices/43707753-69A2-4EC7-B990-F7910A853F42/data/Containers/Data/Application/E4F4A368-02B0-4BAE-BEB3-BDF0FF7ADDDF/Documents/1657.jpeg HTTP/1.1" 404 193 "http://localhost:8081/assets/src/index.html?platform=ios&hash=8cb6d49177b95c46ed6654eb038a9a8d" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B72"

2.手机

::ffff:192.168.100.143 - - [25/Nov/2016:11:58:31 +0000] "GET /var/mobile/Containers/Data/Application/970B3033-4AB1-48CF-AFC9-D30534D30BCE/Documents/1657.jpeg HTTP/1.1" 404 108 "http://192.168.100.114.xip.io:8081/assets/src/index.html?platform=ios&hash=8cb6d49177b95c46ed6654eb038a9a8d" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100"

我认为这是正确的路径（至少对于iOS），但我认为这可能是权限问题，尽管不确定。

- plougsgaard

1

你能更新一下你的问题，提供一份用于引用图片的HTML样例吗？ - Ganesh Kanna

2个回答

0

我猜测你的项目结构遵循assets/src...的结构，你正在尝试检索它。RN打包器根本不会公开你的项目，它只是打包转译后的捆绑包（实际上有几个，根据平台和调试/发布模式而异），并提供下载。即使这样做起作用了，一旦你的应用程序上线，它也不会对你有太大帮助。我认为this answer可能涵盖了你的用例。

- martinarroyo

1

我不想引用任何捆绑的静态资源。包含“WebView”的React Native应用程序将下载各种图像并将它们放置在“文档”文件夹中（每个应用程序都有自己的文件夹）。我需要知道如何让WebView指向这些动态资源 - 如果需要，我可以尝试将它们放在其他地方。 - plougsgaard

@plougsgaard 你最终解决了吗？我现在也在苦恼这个问题。 - ekkis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mdiin · Accepted Answer

查看React Native的文档WebView组件，source属性有两种模式：

加载URI
加载静态HTML字符串
调用require(some.html)的结果

在第二种情况下，可以指定baseUrl。如果将baseUrl设置为下载图像的目录，则应该能够通过使用<img src="./your-image.png" />引用它们。

后答案编辑：关于外部HTML的澄清

遗憾的是，在1和3的情况下无法指定基本URL，因此必须先将其转换为可传递给source属性的字符串。如果HTML引用了一些外部JavaScript，您必须获取对捆绑目录路径的引用，这是那些文件必须位于其中才能被您的应用程序读取，并相对于该路径引用它们。

编辑：这是针对React Native 0.38的。