Develop Reference

img not displaying on Android

I have a simple image in my html which renders fine on my PC, but not on my smartphone:
<div id="welcomebox">
<img src="geschenk.jpg"/>
</div>
my folder-structure is as follows:
C:/Maus
- index.html
- geschenk.jpg
on my smartphone I copy that folder to my download-folder and open index.html from there. There's no web-server included, I directly open the file from the filesystem.
But on my smartphone the image isn't displayed.

Chrome will receive a content scheme from the Files app like:
content://com.google.android.apps.nbu.files.provider/1/file:// ...../index.html
As soon as Chrome 'sees' a content scheme it cannot display pictures as even if Chrome changes the scheme to:
content://com.google.android.apps.nbu.files.provider/1/file:// ...../geschenk.jpg
the provider will not let it access as there is no read permission for it.

The Android filesystem structure can't open relative file paths the same way other systems do.
So the answer is you need to use a complete hardcoded file:/// path.
This is not a very good approach since you need to replace all the URLs/paths in your HTML files.
Another approach if you are determined to do so, you can upload all project resources such as images, CSS, javascript to the cloud, like using SDN to access those files and to let the project work. But using the SDN approach it's easier to upload everything including the HTML files to a hosting account.

android webview load html from server and other files from assets

im a new android developer.
My app has WebView which loads lot of data from my site (which has pics, css, JS files).only the html code is updated weekly. other files are almost never changed. so i was thinking of including these static files in android assets, loading only the html from server and other files from assets and cutting down the loading time. how do i do it.
Android WebView Javascript from assets
and as shown in the above solution i cant change the html code to load these from assets because this site will also be accessed by web users.
Is there a way to do this. Thanks in advance..

Firstly you need to have relative paths
<img src="images/someimage.png">
not
<img src="www.mysite.com/images/someimage.png">
Then you need to load the HTML code not using webBrowser, for example like here
And then you can load HTML source into WebBrowser using base URL pointing to your assets like here

Android Load Apart of url to webview

I want to load a part of Website to Webview. Not completed Website.
How can I do it?
It is similar this question.
Load a div into a webview on Android
But the answer only load text. not have Image.
Any one there?

1.Create a HTML file with a frame (or iframe) in it and save it in your assets folder.
2.Load your file in webview from assets .

How to access whole HTML project with Android project?

I have a task to access whole HTML project (with CSS, etc.) in my android project. Can anyone help me on that? I googled about it, but all I found was "Webview", which I already know.
I a\want to know where I can put the CSS files, html files in my Android project and how can I manage whole HTML project? (i.e. transition from one page to other, etc.) Please suggest me some good document or tutorial if you know about this. If webview is the only way, how can I switch from one page to another? Because all I know is to use
myWebView.loadUrl(Uri.fromFile(www.website.com);
I have also managed to load a single html file from sdcard.
myWebView.loadUrl(Uri.fromFile(
new File(Environment.getExternalStorageDirectory()
.getAbsolutePath() + File.separator + "index.html"))
.toString());
But I don't understand how I can proceed for a whole project!
Any help would be highly appreciated.

You need to use webView that is for sure.
For that you can put you whole HTML (css,js,html) in asset folder and load local index.html in webview just like.
webView.loadUrl("file:///android_asset/html/index.html");
And webview will load whole local site. .css and js will be directly handle by webview it self even hyperlink will also work.
You can also customize you webview and listen js call for making hybrid app. But this is only for hybrid app.
Hope this help.

PhoneGap Images

I am currently creating an Android application with Phonegap and I am unable to insert images to my project. I have saved my .png file in different directories and still only a question mark shows up where my image should be. I can not use images from a URL either.

To use a local image try the following.
Put your image in the /assets/www folder of the project
Then set the image tag as follows:
<img src="../www/myimage.png">
Yes, I realize this should be the identical to setting the src to "myimage.png". I cannot say the reason why this might work, but I had the exact same problem with local images on Phonegap and this fixed the issue for me. If you have them in a subdirectory, you can try adding this on to the path:
<img src="../www/mydir/myimage.png">
I also found the following syntax worked, maybe a little less clumsy looking:
<img src="./myimage.png">
Or
<img src="./mydir/myimage.png">
This was all on Android 4.0 unfortunately, I do not know for earlier versions of the OS

For me i got the solution by adding dot before the "images" folder like this
<img src="./images/bg4.jpg" />

There's a mistake I've done quite a lot.
If you add .js files to your index.html and use images in them, you need to calculate your images path from the index.html page and not from the .js file because the .js file will be interpreted in index.htm
For example, put all your images in a img/ folder next to index.html and then when you're using one of these images just do
<img src="img/YOU_IMG.png" />

There's nothing special about images in PhoneGap applications - they're web applications. If you point a desktop browser to your project folder and open the index.html, what happens with your images? If they don't show up there, they're not going to show up in the PhoneGap application.