Hi,
This issue is highly related to #241 (and fix #625 for that issue). However, as they're closed and delivered I'm opening a new one.
Use case
In my app I'm downloading JSON which is then turned into HTML with a little help from Handlebars - and then served in a WebView. I'm also downloading some images which is shown in that HTML file.
So basically:
wv = new webViewModule.WebView();
wv.src = `
<html>
<body>
Hi there, here's a picture
<img src="some/path/to/my/previously/downloaded/local/image.png">
</body>
</html>
`
Problem
Setting the src of the WebView to a html string invokes _loadData which invokes
this._android.loadData(src, "text/html; charset=utf-8", "utf-8");
Code here: https://github.com/NativeScript/NativeScript/blob/master/ui/web-view/web-view.android.ts#L97-L103
The problem with WebView's loadData method is that Android doesn't allow retrieving the image in the <img src=.... Console just outputs Not allowed to load local resource.
However, when using loadDataWithBaseURL and setting the baseUrl, Android shows the image just fine.
I monkey-patched web-view.android.ts at line L102 and rewrote that line into:
var baseUrl = "file:///" + require("file-system").knownFolders.documents().path + '/';
this._android.loadDataWithBaseURL(baseUrl, src, "text/html; charset=utf-8", "utf-8", null);
This makes the images show (yay!). But hard coding it to use the documents path as the baseURL root isn't all that nice and I'm not sure how to solve it in a less opinionated way. Otherwise I'd have sent a PR.
Is knownFolders.documents() always a child of knownFolders.currentApp()? If so we could set the baseURL to currentApp() and then let the user prepend the <img src> src with documents() (and possible subdirectories) if the files are stored there, or just prepend it with a fixed path if the files are included in the actual app.
Hi,
This issue is highly related to #241 (and fix #625 for that issue). However, as they're closed and delivered I'm opening a new one.
Use case
In my app I'm downloading JSON which is then turned into HTML with a little help from Handlebars - and then served in a WebView. I'm also downloading some images which is shown in that HTML file.
So basically:
wv = new webViewModule.WebView(); wv.src = ` <html> <body> Hi there, here's a picture <img src="some/path/to/my/previously/downloaded/local/image.png"> </body> </html> `Problem
Setting the src of the WebView to a html string invokes _loadData which invokes
Code here: https://github.com/NativeScript/NativeScript/blob/master/ui/web-view/web-view.android.ts#L97-L103
The problem with WebView's loadData method is that Android doesn't allow retrieving the image in the <img src=.... Console just outputs Not allowed to load local resource.
However, when using loadDataWithBaseURL and setting the baseUrl, Android shows the image just fine.
I monkey-patched web-view.android.ts at line L102 and rewrote that line into:
var baseUrl = "file:///" + require("file-system").knownFolders.documents().path + '/'; this._android.loadDataWithBaseURL(baseUrl, src, "text/html; charset=utf-8", "utf-8", null);This makes the images show (yay!). But hard coding it to use the documents path as the baseURL root isn't all that nice and I'm not sure how to solve it in a less opinionated way. Otherwise I'd have sent a PR.
Is knownFolders.documents() always a child of knownFolders.currentApp()? If so we could set the baseURL to currentApp() and then let the user prepend the <img src> src with documents() (and possible subdirectories) if the files are stored there, or just prepend it with a fixed path if the files are included in the actual app.