Languages

Menu
Sites
Language
How to display local images in web viewer

Hi

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

 

List

Responses

13 Replies
Alex Ashirov

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);

Alex Dem

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.

Lakshmi Prathyusha

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

Alex Ashirov

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));

Lakshmi Prathyusha

Hi 

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

Alex Ashirov

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.

Alex Dem

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.

basu

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.

Lakshmi Prathyusha

Hi

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

basu

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.


 

basu

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.

Lakshmi Prathyusha

Hi

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

basu

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.

<img src="../res/test.jpg" />

 

Hope this will solve your problem :)..