All geek questions in one place

Download local image file from WebView

I have a React Native WebView that runs a small HTML document. The document shows several images.

My hope is to display images located in the Applications Documents folder, that is, the images are not static assets, but are downloaded by the application at runtime and saved to disk. These images are then referenced in HTML working inside the React Native WebView .

This is what I have tried so far:

Search for a file directly

I tried to find a file from WebView that does not work (404 Not Found):

1. The simulator

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

2. Phone

:: ffff: 192.168.100.143 - - [25 / November / 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 e.g. Gecko) Mobile / 14B100 "

Seeing that this is the right way (at least for iOS), I think it could be a permission issue, albeit an uncertain one.

+5
source share
2 answers

Looking at the documents for the React Native WebView , the source property has two modes:

  • Download URI
  • Download a static HTML string
  • Call result of require(some.html)

In the second case, you can specify a baseUrl . If you install baseUrl in the directory where the images are downloaded, you should be able to link to them using <img src="./your-image.png" /> .

Post-Reply Editing: Refinement on External HTML

Unfortunately, there is no way to specify a base URL in cases 1 and 3, so you must first convert it to a string that can be passed to the source property. If your HTML refers to external external Javascript, you need to get a link to the package directory path where these files should be readable by your application, and reference them relative to this path.

EDIT: This applies to React Native 0.38

+2
source

I assume that your project structure follows the assets/src... structure you are trying to get. The RN launcher does not open your project at all, it simply packs the transferred package (it actually changes somewhat to the platform and debugging / release mode) and offers it for download. Event, if it worked, it will not help you when your application starts to live. I think this answer could cover your usecase.

0
source

Source: https://habr.com/ru/post/1260347/

More articles:


All Articles