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.
Related
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.
I have a live website which I want to show in my app with WebView. But also I want to add a css file in my website which will only work if This particular app load the website. Otherwise that css will not work.
Is this possible? If possible please anyone can tell me how to do that?
Put your index.html of your Website and the css file in the assets folder of your Android project. Modify your index.html so it will load the css file by adding a link to it.
Then when loading the WebView, just load the index.html from your assets folder and you are done. Like so: webView.loadUrl("file:///android_asset/index.html")
I have the following really simple HTML - see below.
I have stored the HTML in a .html file on my PC and I have placed the PNG file in the same folder. When I open the HTML file, it works fine. However when I move the two files to my Android phone and execute the HTML file, the PNG file is not found (the not found icon is displayed). This happens with several browsers (including Chrome and Opera). This used to work. Any idea why I'm getting the error?
Has something changed recently? For example, when I open the above HTML file on my Android, I now see "content://" in the address line whereas I used to see "file://".
Many thanks
<BODY>
<IMG src="./1419196262_circle_close_delete-20.png">
</BODY>
I have two links in an application the fist one as below and it's working fine:-
<img src="images/en.png" width="30" height="30" >English
The second one is as below with the error There was a network error. (file:///android_asset/www/login.html) :-
<img src="images/en.png" width="30" height="30" >English
which means that the application crashes while trying to access html file which is not located in the same directory. Any Idea Please
The path should be set as absolute path as below:-
file:///android_asset/www/login.html
But this requires to set a condition case for the used platform as the above will not work with iOS. To short it cut and only if you are developing a small application, drop your files in one location and set a relative path.
Another Advice, I found that XDK is better than Phonegap. Intel is rock!
Thanks!
I'm working on a Worklight project that downloads a zip file, unpacks it, and stores the files in the specific documents directory of the platform (in iOS that's NSDocumentDirectory, on Android I'm using getFilesDir()). The file consists of one HTML file and several images, located in a sub directory (media). Downloading and unzipping works fine on both platforms. After the unzip process I'm loading the contents of the HTML file into an existing div (since this is a Worklight app, everything is in one HTML file).
Here things become complicated:
The image tag sources in the HTML file that I've downloaded are relative to the HTML file (e.g. 'media/myimage.jpg'). When I inject the HTML file into the Worklight HTML file (which is located in the App bundle/package), the base URL changes and the images can't be found anywhere. I fixed this by writing native functions that rewrite all the image tags in the downloaded HTML file to point to an absolute URL (iOS: /var/mobile/Applications/<identifier>/Documents/, Android: /data/data/<id>/files/). This works fine on iOS, but on Android it causes the HTML to only load partially. LogCat then shows:
Unknown chromium error: -6
If I keep the files as they are, the HTML loads correctly, but obviously with broken images. I've also tried to change the URLs to file:///data/data/<id>/files/ [...], which also causes the HTML to not load completely. I have really no idea what is causing this problem. The app already has the WRITE_EXTERNAL_STORAGE permission.
Does anyone have an idea how to fix this? Thank you!
Turns out this error was caused by having images that are larger than 1500px in width. After scaling them down, the error disappears. Must be a problem with the Android webview, I guess.