Access image from HTML file inside Android app

kerem

Hi,

I am checking the QtWebView module. I am using local html file inside the project. I have a simple html file which has a simple PNG file and some javascript files. I added this files in the html file by "src" attribute by using "img" html and script tags of html. I can access files from html on windows app but I cannot access from Android. My phone has Android 4.4 Kitkat. Could someone give me a sample project or how can I access the images / javascript files in html by using Qt WebView?

Thanks in advance.

jsulm

@kerem How do you deploy the image and JavaScript files to Android? Are those in the APK file? How exactly do you reference these files in the HTML file (how do the URLs look like?)?

kerem

Hi jsulm ,
Actually, I am new about mobile development. When I checked for Android native development the resource/images files can be stored "assets" folder. So, I assumed that maybe they can be deployed with Qt resource system into the "assets" folder or such a kind of folder. I made a simple QtQuick 2 App and put a static Html file and a PNG file and try to access this PNG from this static Html by putting Html in a WebView component. It is working in the desktop app but when I try to build for my Android phone, it doesn't display the PNG for Android build. I try some path/URL alternatives like below but they didn't work.

In Html:
<img src="qrc:///avatar.png" />
<img src="qrc:/avatar.png" />
<img src=":/avatar.png" />
<img src="file:///android_asset/avatar.png" />

It works on desktop with this path :
<img src="avatar.png" />
Becuase all files in the same folder. There are no subfolder for simplicity. You can my folder structure from the attached files.

Thanks for reply.

raven-worx

@kerem said in Access image from HTML file inside Android app:

I can access files from html on windows app but I cannot access from Android

what does "cannot access" exactly?!
QtWebView module on mobile devices used the native webview. Thus your only chance to access the HTML source code is to add websocket support to the local deployed HTML file.
See QtWebSockets examples as reference.

Edit: ok i think i misunderstood the initial question

kerem

Hi raven,

This is my Html calling image line:
<img src="avatar.png" alt="Avatar" />

And these are Qml lines:

WebView{
    id: webView
    anchors.fill: parent
    Component.onCompleted: {
           url = "login.html"
    }
}

Btw,my environment is Windows 7 x64. And when I build the project for desktop mode, app displays the image, but if I build project on my mobile phone. It doesn't show the image. I try to understand if I can develop a hybrid application like phone gap or other hybrid framework by using Qt WebView. So, I thought that if I design some Html pages and add my JS and image files into HTML and call Html from Qt webview. I can achieve that a hybrid mobile app.

Am I wrong with that thought?

For this reason, I started a simple scenario for this.

You said that I can only access the Html source code by adding websocket (I could misunderstand this sentence. ).

So, for my above scenario, this is still a valid sentence. In order to access JS or image files from HTML code, I can use websocket only. Right?

Thanks

raven-worx

@kerem said in Access image from HTML file inside Android app:

Am I wrong with that thought?

no, thats possible.

You said that I can only access the Html source code by adding websocket (I could misunderstand this sentence. ).

as i said i most probably misunderstood your question at first. Websockets is only needed if you want interaction bewteen C++ and HTML (e.g. to modify the DOM or call system methods from within HTML/JS)

Back to topic:

A path such as file:///android_asset/local.html is the right way to go. Since it's not possible for the native webview to access any Qt resources.
But then it depends if your local html is really part of your APK (-> an asset). So how did you add the html file to your APK? Did you place it in the assets folder?

kerem

In order to add source for my APK part,I added the file definitions to my .PRO files like below. (I thought that I can add/import my HTML or image file like this way. I can be wrong. Sorry.)

Below lines are my are in .pro files

RESOURCES +=
$$PWD/avatar.png
$$PWD/login.html

DISTFILES +=
$$PWD/avatar.png
$$PWD/login.html

Or how can I achieve this job? Adding all source to add APK for Android and IPA for iOS and accessing them in this Html file?

Btw, I can access Html files by using "qrc:///local.html" in my QML code. But I cant access PNG or JS files in "local.html"? That's my problem (This note is just for clarifying)

raven-worx

@kerem
no thats not enough for your files to be deployed into the APK!

Either put it into the assets folder (inside the path specified in the ANDROID_PACKAGE_SOURCE_DIR variable)
or use qmake's DEPLOYMENTFOLDERS variable container feature (taken from here):

folder_01.source = extra_data
folder_01.target = extra_data
DEPLOYMENTFOLDERS += folder_01

where extra_data is the folder name in the project's root directory.

kerem

@raven-worx
I checked the link for the DEPLOYMENTFOLDERS parameter in the ".pro" file. I doesn't affect in my case. I added the below lines into my root ".pro" file.

folder_01.source = /files
folder_01.target = /files
DEPLOYMENTFOLDERS += folder_01

And I put this "files" folder under "Resources" node like below:

And I try to access the "avatar.png" file in the local HTML file like this:

<img src="assets:/avatar.png" alt="Avatar" id="myimg" style="width:100%;height:100%;" />

It loads HTML file into WebView but it doesn't load the "avatar.png" in the HTML "img" tag.
It shows only alternative text of the "img" element.

I also tried ANDROID_PACKAGE_SOURCE_DIR. It doesn't work,too

Am I missing something? Is "src" path wrong?

raven-worx

@kerem said in Access image from HTML file inside Android app:

And I put this "files" folder under "Resources" node like below:

this path is relative to your .pro file. qrc isn't involved here at all!

@kerem said in Access image from HTML file inside Android app:

I also tried ANDROID_PACKAGE_SOURCE_DIR. It doesn't work,too

ANDROID_PACKAGE_SOURCE_DIR = /android
Then there will be a new folder named "android" next to your .pro file. In there create (if not already exists) a folder "assets" and copy your files into it.

kerem

I added ANDROID_PACKAGE_SOURCE_DIR = /android line into the .pro file.
I can see the PNG file in assets folder. But then how can I call this file from the HTML file?
I put the below line in my local static HTML file.
<img src="assets:/avatar.png" alt="Avatar" id="myimg" style="width:100%;height:100%;" />

But , the above line doesn't affect for Android case. Is src="assets:/avatar.png" wrong ?

raven-worx

@raven-worx said in Access image from HTML file inside Android app:

A path such as file:///android_asset/local.html is the right way to go.

You may need to put it into src/main/assets (in the android folder) though ... i am not sure.