trying to understand imageview on main layout with json object

Question

I'm trying load an image into an image view. The source of the image is a JSON object and as formatted like a html image i.e image tags. I've looked at potential solutions like Picasso and universal image loader but I don't believe they fit in my desired solution. I've also tried solutions which download the image and then load it into the view but because of the way that the source is formatted, the image didn't show for me. How do i clean the source of the image and load it into my image view?

My JSON is structured like this:

{"entries":[{"introtext":"<p><img src='something.jpg'/></p>"}]}

Try using WebView instead of ImageView and use loadPage().. Its the only solution as your requirement. — Anuj Sharma, Jul 21 '14 at 06:51
@AnujSharma It's not the only solution, but it's a reasonable solution. The OP can always parse the HTML to get the source of the image. — Aleks G, Jul 21 '14 at 10:00

score 0 · Answer 1 · answered Jul 21 '14 at 07:54

try using a webview .

WebView view=(WebView) findViewById(R.id.webViev);
        String data=new String();

If you use a local image in assets folder proceed as follows.

 data="<html><head></head><body><br/> <img src=\"file:///android_asset/photo.jpg\"  height=\"150\" width=\"150\"/></body></html>";

    view.loadDataWithBaseURL(null, data,"text/html", "utf-8",null);

If you want to load the image from url, use public Drawable getDrawable (String source) a function from Html.ImageGetter.

This function will be called each time when an tag is detected in html.

So overridding this method you can append necessary prefix , like

htt://yourdomain.com/images/ to the "something.jpg.." from the json .

You have to return a drawable of the image from this function.

score 0 · Accepted Answer · answered Jul 21 '14 at 10:47

A WebView could be the way to go for you, however depending on the actual content of the response, you may still need to parse the HTML to get the source of the image - to append the base URL. Once you do that, you'll already have the full image URL in a string variable - so you might just load the image and set it to the ImageView.

There are plenty of questions on SO about how to set an image from a URL into an ImageView. I'll just show how simple it is to parse your response to get that URL. I'm basing this answer on JSOUP library to parse HTML - download the jar and include it into your project.

private final static String BASE_URL = "http://www.somesite.com/appdir/";

// get your json in whichever way you do it.
String json = ...;

// parse the json and get the html corresponding to the first element in the array
String htmlSource = new JSONObject(json).getJSONArray("entries")
                                        .getJSONObject(0)
                                        .getString("introtext");

//use jsoup to parse the html source and get the src attribute of the first image
Document doc = Jsoup.parse(htmlSource);
String imgSrc = BASE_URL + doc.getElementsByTag("img").get(0).attr("src");

Now that you have the full URL of your image, it's a very simple task to load that image and set it into ImageView.

Note that you'll need to add the appropriate error handling to the above code.

For this method, i've implemented most of it except the part of setting it into the imageview. i'm not sure how to do that. do i need an AsycTask? — bwubbq, Jul 21 '14 at 14:36
@bwubbq As I stated, there are loads of questions addressing that part. Here is [one of them](http://stackoverflow.com/questions/2471935/how-to-load-an-imageview-by-url-in-android/2472175#2472175) — Aleks G, Jul 21 '14 at 14:38

trying to understand imageview on main layout with json object

2 Answers2