Quantcast
Channel: Appcelerator Developer Center Q&A Tag Feed (webview)
Viewing all articles
Browse latest Browse all 680

Solution for those with the "Android + Webview = Resource Images Not Showing" Problems

$
0
0

Hey guys,

Thought I'd share this since I spent hours pulling my hair out (until 6am) and trawling through dozens of the same questions posted here over the last 2 years. I slept on it and came up with a solution today.

As some of you will know, having images in the resources folder (or sub-folders thereof) show up in a HTML page on an Android webview is problematic. It may work fine in the emulator, and it may work debugging on the device, but once packaged up it won't show any images at all. I found this the hard way after already putting my app on the market. Silly me for not testing after packaging.

So basically - any image in Resources won't show in Android webviews. No matter if you put the native path as assigned by Titanium, or app://, relative, or whatever - it won't show up. I've read so many posts on this and none worked, so people blindly suggesting the above only cause more frustration :P

Well, finally, this morning after a cold shower, I found a way to get all my Resources files (css, javascript and images) to actually work within the HTML after being packaged.

First, for the webview URL use the usual format:

app://whatever.html

However, within your HTML itself use absolute paths for all assets as follows;

file:///android_asset/Resources/someimage.png file:///android_asset/Resources/path/to/someimage.png

Note the file:/// has 3 slashes, not 2.

Within my stylesheets the paths for background images are relative (from a sub-folder) so they work, but I recommend for stylesheets in the root Resources folder to use the absolute path for background images just in case. Of course, if you have javascript that assigns image src or div background urls - use the absolute path too!

Maybe I'm the only person who needed to solve this. But if it helps someone else, it's worth posting. Might save you programming heartache.

Have fun developing!


Viewing all articles
Browse latest Browse all 680

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>