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.
Related
I'm trying to create a Delphi 11 app for Android 12, which opens a local HTML file with local images.
The local HTML file is stored here:
content://com.embarcadero.MyAppDir/fileprovider/external_public_files/MyAppDir/Pics/MyFile.html
The local images are stored in the same local directory.
I can get Chrome and other browsers to open the HTML file without any problem, except that none of the images are displayed. Instead of my images the browser simply shows small icons with a broken corner, indicating an error.
None of these work for me:
<img src="mypic.jpg"/>
<img src="/storage/emulated/0/MyAppDir/Pics/mypic.jpg"/>
<img src="com.embarcadero.MyAppDir/fileprovider/external_public_files/MyAppDir/Pics/mypic.jpg"/>
I just don't know what else to try after src=.
content://com.embarcadero.MyAppDir/fileprovider/external_public_files/MyAppDir/Pics/MyFile.html
That is a content scheme uri.
You added a grand read permission to the intent so the browser could read the html source using the uri.
>><img src="mypic.jpg"/>
That is the src attribute that you should use.
Now the browser will try to read the image after having build an uri for it. The uri the browser build will be:
content://com.embarcadero.MyAppDir/fileprovider/external_public_files/MyAppDir/Pics/mypic.jpg
But unfortunately the browser has no read permission for this uri as you did not give it in the intent. (Not that it would be possible to do so).
Yes the old times were better. A browser just changed /path/file.html to /path/picture.jpg and all worked.
I'm trying to view my HTML file on the android mobile browser.
My HTML file has the following code:
<html>
<head>
<title>Testy</title>
</head>
<body>
<h1>Captain is Here</h1>
<img src='captain.jpg' width='30%' alt='Testy'/>
</body>
</html>
The image(captain.jpg) is also in the same folder where the HTML page is located. I'm getting the image on the computer browser but when I'm trying to open it in mobile browser image, not showing. I tried giving different file paths. How can I achieve this by giving a universal path by that a mobile that containing these HTML files should open in respective browsers and render images too?
1- your image size is too large try an image with a smaller size or resize or format your image into a smaller size.
try src-'./caption.jpg' instead of src='caption.jpg'
Opening through directry location of Html in Chrome Solve this.
For that get html file location directry in details by file manager
Example storage/emulated/0/web_folder/file.html and copy it
After that
1.Open chrome
2.type file:/// and Paste directry location
3."file:///storage/emulated/0/web_folder/file.html" Now it can run with image
Ensure that storage permission allowed to chrome
For that Open permission settings for chrome and allow storage permission
that's where mhtml and URLs get used!!!
Have you ever downloaded a page using chrome in android? if so you would have known about mhtml
MHTML, an initialism of "MIME encapsulation of aggregate HTML documents", is a web page archive format used to combine, in a single computer file, the HTML code and its companion resources (such as images, Flash animations, Java applets, and audio and video files) that are represented by external hyperlinks in the web page's HTML code
to convert your html to mhtml you may use some tools but you can also do it manually .
converting need not rename the file as index.mhtml but use all necessary files as hyperlinks
you may use image hosting sites like imgur or imgbb or even firebase if your familiar.
after you host get the link by
right-clicking image
open image in new tab
copy link
use it(link) instead of captain.jpg
Here is an example of how to get link using imgbb
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'm a bit new to this so bear with me. What I am trying to do is to get a pdf document to open automatically as soon as a webpage is launched. This webpage will be hosted locally and the pdf document(S) will be stored locally as well.
Essentially we are using an external platform that allows buttons to link to exterior webpages, but does not allow for opening documents. What we are trying to do is to bypass this limitation by having a webpage that is locally hosted that will automatically open up a pdf file which will be stored on the device.
If the webpage just contained the code <a href"link-to-pdf-doc"></a> will this suffice?
If you are wanting to embed the pdf in the web page rather than download it, a simple way is to use just a plain html object tag:
<object data="link-to-pdf-doc" type="application/pdf" width="100%" height="100%">
I am not sure how much support there is in browsers all across the board, but it will work for the majority of modern browsers.
There are also many libraries available which use browser detection to normalise the code and maybe have wider browser support:
https://github.com/mozilla/pdf.js
http://pdfobject.com
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.