<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 #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