Load local image file from within WebView
<p>I have a React Native <code>WebView</code> that runs a small HTML document. The document shows a few images.</p>

<p>My hope is to show images located in the app's <em>Documents</em> folder, i.e. the images are <em>not</em> static assets, but are downloaded by the app at runtime and stored on disk. These images are then referenced from HTML running inside a React Native <code>WebView</code>.</p>

<p>This is what I have tried so far:</p>

<h2>Sourcing the file directly</h2>

<p>I have tried sourcing the file from within the <code>WebView</code> which does not work (404 Not Found):</p>

<h3>1. Simulator</h3>

<blockquote>
  <p>::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 "<a href="http://localhost:8081/assets/src/index.html?platform=ios&amp;hash=8cb6d49177b95c46ed6654eb038a9a8d" rel="noreferrer">http://localhost:8081/assets/src/index.html?platform=ios&amp;hash=8cb6d49177b95c46ed6654eb038a9a8d</a>" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B72"</p>
</blockquote>

<h3>2. Phone</h3>

<blockquote>
  <p>::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 "<a href="http://192.168.100.114.xip.io:8081/assets/src/index.html?platform=ios&amp;hash=8cb6d49177b95c46ed6654eb038a9a8d" rel="noreferrer">http://192.168.100.114.xip.io:8081/assets/src/index.html?platform=ios&amp;hash=8cb6d49177b95c46ed6654eb038a9a8d</a>" "Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100"</p>
</blockquote>

<p>Seeing as I think this is the correct path (for iOS at least), I think it might be a permissions problem, although unsure.</p>