How to display local images in web viewer

By Lakshmi Prathyusha

09 Dec 2013 04:07 English 13 Replies

In native application i'm getting the content from the database and displaying in the webviewer but images are not displaying. Can we display the local images in webviewer.

Thanks & Regards

Responses

13 Replies

Alex Ashirov

09 Dec 2013 08:11

Hi,

I don't know exactly how you trying to display images. But, in general, for example, you can display local images stored in your data folder like following using Tizen::Web::Controls::Web :

url = L"file://" + App::GetInstance()->GetAppDataPath() + L"imageName.jpg";
__pWeb->LoadUrl(url);

Reply to this post
Mark as answer

Alex Dem

09 Dec 2013 09:31

Hi,
in additional to Alex's post:
you could load in WebView locally stored *.html file this way:
String url(L"file://");
url.Append(App::GetInstance()->GetAppDataPath() + L"uritest.html");
__pWeb->LoadUrl(url);
and load image inside *.html file from your FileSystem < img src="./image.jpg" > (please remove extra spaces).
Alexey.

Reply to this post
Mark as answer

Lakshmi Prathyusha

18 Dec 2013 06:51

Hi,

I tried like this but local images are not displaying in the web view.

I placed all my local images in the res/multimedia folder

AppResource* pAppResource = Application::GetInstance()->GetAppResource();
  String imagePath=App::GetInstance()->GetAppResourcePath();
  AppLog("image path%ls",imagePath.GetPointer());
  imagePath+=L"multimedia/";
  AppLog("image path%ls",imagePath.GetPointer());
  //pAppResource->LoadAppResource(L"multimedia/1.Angel Biscuits.jpg");
  html.Replace(L"<img src=\"/multimedia/", L"<img src=\""+imagePath);
  AppLog("imagesPath...%ls", html.GetPointer());*/

Thanks

Reply to this post
Mark as answer

Alex Ashirov

18 Dec 2013 07:25

Hi,

Please try the following (replace YourFileName.jpg with you file name before):

url = L"file://" + App::GetInstance()->GetAppResourcePath() + L"multimedia/YourFileName.jpg";
__pWeb->LoadUrl(GetValidUrl(url));

Reply to this post
Mark as answer

Lakshmi Prathyusha

19 Dec 2013 03:31

i tried like this but image is not displaying.

String    url = App::GetInstance()->GetAppResourcePath()+L"multimedia/";
			AppLog("image path%ls",url.GetPointer());
			__pWeb->LoadUrl(url);
			html.Replace(L"<img src=\"/multimedia/", L"<img src=\""+ url);
			AppLog("imagesPath...%ls", html.GetPointer());

Actually what i'm trying to do is in my database html data contains the <img> tag. Now i want to replace that tag with this 'url' and display that image in webview.

I placed my images in path : res/multimedia folder

Thanks

Reply to this post
Mark as answer

Alex Ashirov

19 Dec 2013 05:10

Hi,

From your code snippet I can see that you call __pWeb->LoadUrl(url); when url is equal to App::GetInstance()->GetAppResourcePath()+L"multimedia/" and it doesn't contain any image file name. So, this code should not work.

Reply to this post
Mark as answer

Alex Dem

19 Dec 2013 07:49

Hi,
If you want to load image or html file via __pWeb->LoadUrl (load concrete html document or concrete image) you should compose URL this way
String url(L"file://"+App::GetInstance()->GetAppResourcePath()+L"multimedia/yourFileName.jpg");
Looks like in your code snippet this action no sense.

But as I see you try to modify html file with images located in some directory (res/multimedia in your case).

If your html file placed at "./data/index.html" path -> your finally image tag should contains image file name also and looks like :
1) for relative src path < img src="../res/multimedia/yourImage.jpg" >
2) for absolute src path < img src="/opt/usr/apps/appId/res/multimedia/yourImage.jpg" >
So you need to update every img tag with concrete image file path.

Alexey.

Reply to this post
Mark as answer

basu

19 Dec 2013 11:42

hi,

I have not tested in h/w. But in emulator i can display the images(i have put them inside the data folder) in the web control.

here is the snippet:

Tizen::Base::String url = App::GetInstance()->GetAppRootPath() + L"data/test.jpg"

__pWeb->LoadUrl("file://" + url);

----------------------

As mentioned in the earlier replies, in ur code , the absolute path(with file name) is missing. that's why it is failing.

What you can do is, While storing the file path in database, you can store it as a proper absolute path(without any html tags). Then all your parsing problem will go off.

Reply to this post
Mark as answer

Lakshmi Prathyusha

20 Dec 2013 04:24

Image is displaying but when i'm trying to display along with data, image is not displaying.

I'm using LoadData() to load the data in web viewer.

html +=GetDB()->__html;
ByteBuffer* b =StringUtil::StringToUtf8N(html);
__pWeb->LoadData(null,*b,String(L"text/html"),String(L"UTF-8"));

How can i display the image along with the data ?

Thanks

Reply to this post
Mark as answer

basu

20 Dec 2013 07:22

Modify your design something like this: Make your web view as the view and .cpp code as model/engine. Your html file will request from the model for img path and textdata.

Communicate between .html and cpp file using javascriptbridge for data passing. Before you call LoadUrl() , make sure you have the image path and textdata available. I think that will solve your problem.

Reply to this post
Mark as answer

basu

20 Dec 2013 07:25

Add to the above comment, in html file have seperate tags for displaying image and textdata. And to fill that, fetch data from the model which'll be ur cpp code.

Reply to this post
Mark as answer

Lakshmi Prathyusha

20 Dec 2013 08:28

my html data looks like this

<!DOCTYPE HTML><html><head>
<title>Sample</title>
<meta content="text/html" charset="utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="/multimedia/template_New_Recipes.css" />
<script defer="defer" src="js/sample.js" type="application/javascript"></script>
</head><body><article id="content"><section id="dataSectionInstanceId-681044" class="Title"><h1 class="mobi-page-title">sample</h1></section><section id="dataSectionInstanceId-765668" class="Image"><img src="/multimedia/sample.jpg" /></section><section id="dataSectionInstanceId-681047" class="Instructions">Dissolve yeast in the warm water, set aside.<section id="dataSectionInstanceId-681051" class="card-title">Serves 1</section></article></body></html>

if i'm trying to display this .html file through code content is displaying but image is not displaying in web view. Even i'm giving the direct image path.

Thanks

Reply to this post
Mark as answer

basu

20 Dec 2013 09:17

I have tested your file and its working.

problem is @ image source path.

I have put an img inside the res dir. so below is the path. You need to modify your absolute path accordingly. If the img containing dir is in the same level of inc,src,res etc. then you have to put 2 dots(..) before your path.

Hope this will solve your problem :)..

Reply to this post
Mark as answer

User Menu

Tizen Forums

Community

Community

Responses

Search form

Responses