img not displaying on Android

Question

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.

Answer 1

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.

Answer 2

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.