Nativescript: <img> in webview works on iOS emulator, fails on iOS device

[dlcole]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
✔ Component nativescript has 4.2.4 version and is up to date.
✔ Component tns-core-modules has 4.2.1 version and is up to date.
✔ Component tns-android has 4.2.0 version and is up to date.
✔ Component tns-ios has 4.2.0 version and is up to date.

• Plugin(s): none

Describe the bug
A simple webview with an image in a local folder is not loaded on an iOS device, but is loaded on an iOS simulator and on Android devices and simulator.

To Reproduce
Create a webview, include an tag and set the src= property to a local folder, i.e,
<img src="./marker_r.png" >

An external image will display properly on an iOS device, a local image will not.

Expected behavior
Image is shown as it is on Android and an iOS simulator

Sample project
https://play.nativescript.org/?template=play-js&id=2Jslpt&v=7
(Note that playground project does not include image file in local folder, but does show what attempts have failed)

Additional context
This appears to be identical to https://github.com/NativeScript/NativeScript/issues/4443 but yet the problem persists with the latest NativeScript code.

Also posted at https://stackoverflow.com/questions/52712839/img-in-webview-works-on-ios-emulator-fails-on-ios-device

[tsonevn]

Hi @dlcole,
To load a local image resource in the WebView, you can try using an absolute path, base on app folder. For example:
If we have files structure similar to the one shown in the image

you can try loading the page as follows

 viewModel.htmlsrc += '<div class="marker"><img class="marker" src="home/marker_r.png"></div>';

[dlcole]

See Manoj's response at https://stackoverflow.com/questions/52712839/img-in-webview-works-on-ios-emulator-fails-on-ios-device/52748358#52748358 - this is still looking like a {N} bug, methinks.

[tzydo]

I have a similar problem, when I'm loading html file contents load correctly(html code) but assets like a photo javascript and css doesn't load. I try load assets from different paths in src attribute, eg.

• ~/app/resources/test/test.jpeg
• test.jpeg
• ~/test.jpeg
• app/resources/test/test.jpeg
• ./app/resources/test/test.jpeg
• /resources/test/test.jpeg
• ~/resources/test/test.jpeg
• ./resources/test/test.jpeg
• ./test.jpeg
• /var/mobile/Containers/Data/Application/461EC94C-13AE-4C9C-8195-F1B46A83DE61/Library/Application Support/LiveSync/app/test.jpeg
• file:///var/mobile/Containers/Data/Application/461EC94C-13AE-4C9C-8195-F1B46A83DE61/Library/Application Support/LiveSync/app/test.jpeg
• ~/file:///var/mobile/Containers/Data/Application/461EC94C-13AE-4C9C-8195-F1B46A83DE61/Library/Application Support/LiveSync/app/test.jpeg
• ~/var/mobile/Containers/Data/Application/461EC94C-13AE-4C9C-8195-F1B46A83DE61/Library/Application Support/LiveSync/app/test.jpeg

but nothing works.

exampleApp.zip

[pawel-filuciak]

Hi,

This problem is a blocker for me, I have some html content embedded into the app (for presentation), wright now I can not update from version 3.2, because of that nasty bug.
Is there some workaround? (proposed above does not work)
Is there some timeline for that issue?

Many thanks!
Pawel

[dlcole]

@pawel-filuciak - sorry you're having this problem, too. I have been unable to find a workaround. I agree this is a problem that really needs to be fixed.

[tsonevn]

Hi all,
You can check the suggestion provided in this StackOverflow thread.

[gregorywojcik]

Hi,
I have made patch for this issue.
You can apply this by this command
patch -p0 -l -f -i repair_ios_web_view.patch
file must be placed in root folder of project.
repair_ios_web_view.zip

[tsonevn]

Hi @gregorywojcik,
Any PR, which provides a needed fix, will be highly appreciated. Check out our contribution guidelines.

[xuanhungttm]

@gregorywojcik - thank you so much. I have just tried your solution and it worked perfect on Iphone
device

[dlcole]

@gregorywojcik - your patch looks useful thanks for offering it!

But, it requires that the local file have a full file:/// prefix, which precludes use of relative paths, which is what I really need.

[gregorywojcik]

@dlcole
In our app we have using local path in format: ~/resources/presentation/index.html, ~ is pointing to root of app
This path is automaticly resolved to file://app/path/resources/presentation/index.html, thanks this my patch works fine.

[manojdcoder]

@NickIliev This issue is not just limited to image tag but loading any resources (JS / CSS / Images etc.,) from the same folder where index.html is hosted.

[dlcole]

This problem is still not fixed for me. My code has the html defined as part of the viewModel (i.e., not a standalone file). From within the html I reference images I want to include, such as

<div class="marker"><img class="marker" src="./web-img/marker_y.png"></div>

As I mentioned in my original post, this works on Android, and I need a single format that works on both Android and iOS. It appears the fix only works where you're loading a static html file with resources in the same folder. :-(

[manojdcoder]

@dlcole I think that was the intention, iOS web view can load the assets only from the whitelisted directory, when you pass HTML string it's impossible to know from which directories it's going to load the assets.

You might want to log a new issue for exposing a new property on WebView class to set the list of directories to whitelist.

[dlcole]

@manojdcoder Your comment made me think that if I moved the images to the app folder, which would surely be whitelisted, then perhaps this could work. So, I changed the img tag to be:

<div class="marker"><img class="marker" src="~/marker_y.png"></div>

But that fails on both Android and iOS. Do you think this is really just a whitelisting issue?

[dlcole]

@manojdcoder So I added code to copy my images to the temp folder, write the html source to a file in the temp folder, and changed the src attribute to point to the file. Good news! This now works on iOS devices, as I expected given the fix described above.

Now for the bad news: this does not work on Android :-(. So, where I now have

<div class="marker"><img class="marker" src="marker_y.png"></div>

the image file is not found.

[dlcole]

Oops - spoke too early! My code wasn't overwriting the html file, so it wasn't picking up my source changes on Android. This approach does indeed work on both iOS and Android. Yay!

[hraynaud]

@dlcole @gregorywojcik I'm still a bit confused about the status of this issue? @gregorywojcik do you plan to submit a PR to have this feature officially merged in? I haven't tried this patch yet but was wondering if I should wait until there is an official fix. Thanks for the great work everyone.

[hraynaud]

@gregorywojcik @imerljak sorry for the bonehead response above. Didn't realize this fix was in fact merged. Unfortunately It's still not working for me. I'm using NativeScript Vue and wondering if that might be the issue. Similar to @tzydo I tried putting the file in different folders with no success. My app is super basic as this point more or less the boilerplate generated from the CLI so I doubt it could be a plugin issue. I've tested on both the ios Simulator and on my iphone via tns preview. All I get is a black screen

[hraynaud]

@EddyVerbruggen @imerljak @manojdcoder
Here is a link to the a sample app showing the problem:
https://github.com/hraynaud/test-app
I've attached an image showing the issue as well. The red borders are WebViews with the src set to a local file. (I've tried multiple locations none work)

Once curious this I did notice is that if if set the src to "~/test.html" instead of a blank page the webview interprets this path as a the html content and just render ~/test.html to the page as plain text.

[hraynaud]

I was able to get help on from @rigor789 on slack. I needed add my html paths to the copy plugin in webpack config.

new CopyWebpackPlugin([
{ from: { glob: "fonts/" } },
{ from: { glob: "www/.html" } },
{ from: { glob: "/.+(jpg|png)" } },
{ from: { glob: "assets/*/" } },
], { ignore: [${relative(appPath, appResourcesFullPath)}/**] }),
new n
This worked for me for loading files from the /app/www/ folder of my application.

[hgc2002]

Good morning, people.
This is not working for me (January 2020, Happy new year !!!)
I'm using WebView with static content like
<img src=“file:///app/assets/images/my-image.jpg” >
<img src=“~/assets/images/my-image.jpg” >
<img src=“./assets/images/my-image.jpg” >
<img src=“@/assets/images/my-image.jpg” >
And it is showing only a little box with a question mark.
The device is a simulator with an iPhone 8, but also fails in Genymotion (android).
TNS core version is "[email protected]",
What can be failing ??
Thanks in advance.
Regards.

[hgc2002]

Ok, fixed. Don't know why but it was something to do with double-quotes character. I was supposed to be using double quotes, then I changed to single quotes and finally I simply copy the quotes character from other text.

So the solution was simply using this:
<img src="./assets/images/my-image.jpg" >

Worked well in both, iphone simulator and genymotion (android).

[celsobessa]

For people struggling with this issue: the solution mentioned by @hraynaud workedfor me in all instances. So, it might be a good idea checking the globs on CopyWebpackPlugin in the webpack.config.js file:

I was able to get help on from @rigor789 on slack. I needed add my html paths to the copy plugin in webpack config.

new CopyWebpackPlugin([
{ from: { glob: "fonts/" } },
{ from: { glob: "www/.html" } },
{ from: { glob: "/_.+(jpg|png)" } },
{ from: { glob: "assets/*/_" } },
],
{ ignore: [${relative(appPath, appResourcesFullPath)}/**] }),

This worked for me for loading files from the /app/www/ folder of my application.