webview - 从 WebView 中加载本地镜像文件

Question

我有一个 React Native WebView ，它运行一个小的 HTML 文档。该文档显示了一些图像。

我希望显示位于应用程序的 Documents 文件夹中的图像，即图像不是静态 Assets ，而是由应用程序在运行时下载并存储在磁盘上。然后，从 React Native WebView 内运行的 HTML 引用这些图像。

这是我迄今为止尝试过的:

直接获取文件

我尝试从 WebView 中获取文件，但不起作用(404 Not Found):

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 而言)，我认为这可能是一个权限问题，尽管不确定。

Answer 1

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

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

在第二种情况下，可以指定 baseUrl 。如果您设置baseUrl对于下载图像的目录，您应该可以使用 <img src="./your-image.png" /> 来引用它们.

回答后编辑:有关外部 HTML 的说明

遗憾的是，在情况 1 和 3 中无法指定基本 URL，因此您必须首先将其转换为可以传递给 source 的字符串。属性(property)。如果您的 HTML 引用了某些外部 Javascript，则必须获取对包目录路径的引用(您的应用程序必须在该路径中读取这些文件)，并相对于该路径引用它们。

编辑:这是指 React Native 0.38