从WebView中加载本地映像文件

Question

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

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

这是我到目前为止所尝试的:

直接采购文件

我试过从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;像Mac OS X一样的CPU iPhone OS 10_1)AppleWebKit/602.2.14(KHTML,像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和Mac一样) OS X)AppleWebKit/602.2.14(KHTML,像Gecko)Mobile/14B100"

看来我认为这是正确的路径(至少对于iOS),我认为它可能是一个权限问题,虽然不确定.

Answer 1

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

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

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

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

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

编辑：这是指 React Native 0.38