PhoneGap show image downloaded with $.get - android

I'm trying to inject HTML code downloaded from URL into my page.
Here the JQuery code
$('#messageScreen').live('pageshow', function() {
$('#messageContent').empty();
var url = testServerDirAdrs + 'message?message_id=' + selectedMessageId;
$.get(url,
function(data){
$('#messageContent').append(data).trigger('create');
},'html');
});
It works fine, but when downloaded html contains images, they are not displayed.
The image tag downloaded from the URL is:
<img src="/images/logos/muni_1_small.png" />
I guess the problem is with the path.
Any idea how can I solve this problem?
Thanks, Costa.

Below you can find 2 possible solutions:
The image can be downloaded from the web so the src could be like src="http://www.example.com/example/myexampleimg.png"
The image exists locally and the img tag's src must have relative path. For example if the html file in which the img tag will be appended is in the same path as your images folder then the path will be ./images/myexampleimg.png. In case your images path is one folder before then the path will be ../images/myexampleimg.png etc
I hope this helps.

Related

Path to Local Image Specified in JSON

I'm working with a tutorial fromRay Wenderlich (https://www.raywenderlich.com/124438/android-listview-tutorial). In the tutorial, an image is retrieved via the Internet using a URL specified in the locally stored JSON file:
"image" : "https://www.edamam.com/web-img/341/3417c234dadb687c0d3a45345e86bff4.jpg"
The string is stored in the imageUrl variable:
recipe.imageUrl = recipes.getJSONObject(i).getString("image");
Then the image is loaded using Picasso:
Picasso.with(mContext).load(recipe.imageUrl).placeholder(R.mipmap
.ic_launcher).into(thumbnailImageView);
I would like to change the code in the tutorial so that the image is retrieved from the drawable folder within the app, rather than via the Internet. I've been working on this on and off for several days. I assumed it was a matter of changing the URL in the JSON data so that it specified a path to the image file in the drawable folder like this:
"image" : "android.resource://com.raywenderlich.alltherecipes/drawable/chicken.jpg"
So far I've been unsuccessful. Am I on the right path, or am I way off? I'm an Android newbie. I'm used to working with plists in Xcode (although I'm no expert there, either).

Can't share image from dataDirectory via SocialSharing-PhoneGap-Plugin

I have a Cordova android project and using SocialSharing-PhoneGap-Plugin to share images
I'm storing images in dataDirectory. But when sharing image, it won't shares!
window.plugins.socialsharing.share('', 'subject', window.cordova.file.dataDirectory + 'folder/image.jpg');
Share popup appears and I can select an app, subject will share but image won't!
If I share an image from www folder, it works fine.
I used share with image data method:
window.plugins.socialsharing.share(null, 'Android filename', 'data:image/png;base64,R0lGODlhDAAMALMBAP8AAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUKAAEALAAAAAAMAAwAQAQZMMhJK7iY4p3nlZ8XgmNlnibXdVqolmhcRQA7', null);
Note: passing a base64 file as 'data:' is not supported on Android 2.x
You can see here how to Get base64 image data
I'm adding files/ in the final path and it works for me:
window.cordova.file.dataDirectory + 'files/folder/image.jpg'

Phonegap/Cordova: img tag not displaying images from SDcard

I'm new to Phonegap/Cordova and building an app using MaterializeCSS and JQuery on Android OS 5.1. I have a problem that no images in the IMG tag seem to be loading, but the file paths seem to be correct.
I have my app scripted so that images are downloaded from my server to
"file:///storage/emulated/0/Android/data//files/images/".
I have a static index page with a content DIV, modified using jquery:
$("#rBody").html('<div class="row"><div class="col s12">'+jxml+"</div></div>");
Therefore, content is dynamically loaded. the IMG tag src path property is modified as per platform:
jxml=jxml.replace("images", app.getStorageLocation()+"files/images");
However, the image placeholders just have a blank square instead as if image is not found.
Is there any reason for this to occur? Is there a permissions property somewhere I need to enable?
Thank you for any advice!
You will need both file permissions and the File API plugin for Cordova.
With these you should be able to read the image in and add it to the tags.

How to load image file with space in name in android web view?

I have problem in loading image resource file in Android webview. Image name has space in words e.g,
file:///android_asset/images/abc xyz.jpg
So problem is webview consider %20 in name when ever space comes so it can not compare with image which is inside asset folder.
I am not sure is there any problem with asset manager which is giving name like just abc I mean before space name or its problem in webview?.
file:///android_asset/images/abc.html
create abc.html save this abc.html to your assets folder
...
<body>
<img src="file:///android_asset/images/abc xyz.jpg"/>
</body>
....
String url = "file:///android_asset/images/abc.html"

Android:How to refer css file within html in following situation

hi
In my application i need to display a html page in webview and that html page should refer to sdcard location for .css file (Using link href="...." tag).
I placed 2 files (i.e) html and css ) in sdcard->mibook.
I tried by giving absolute path as link href="/mnt/sdcard/mibook/0.css"
how can i specify path name android?
Edited:
Above problem solved : by using this- link href="file:///sdcard/mibook/0.css"
But i have following requirement,
i need to handle around 50+ html file every time ,
I placed all files as follows,
mibook->book1->pg90.sqlite
mibook->book1->links->o.css and 1.css
The sqlite file contains html pages. each html page has css reference as link href="/links/0.css"
These css file should be refer by html. how can i do this?
Try
link href="file:///sdcard/mibook/0.css"
Assuming Android >= 2.1

Categories

Resources