How to get an image using Jsoup and pass to an ImageView

Question

Good day,

I'm trying to retrieve an image using Jsoup but I'm unsure as to what exactly I should be getting from the website. I've used the following code to read from the website and have been able to get the images particular title and the URL it links to but not the image.

I want to set this image to the ImageView that I have in the activity. Here's my code thus far:

        // Get the required stuff from the webpage
        Document document = null;
        try {
            document = Jsoup.connect(URL).get();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        Element info = document.select("div.featurebox").first();
        // Caption on image
        docInfo = info.text();
        // URL of image
        imageURL = info.attr("data-url");

        // Retrieve the actual image
        Element featureImage = document.select("div.featurebox-image").first();
        // Unsure what to get here

It should be noted that the image isn't stored as a normal img-src way. The particular div class I'm looking at is this:

<div class="featurebox-image" style="background:url(http://img.mangastream.com/cdn/feature/02.jpg) center center;">
                <div class="featurebox-caption">
                    <strong>History's Strongest Disciple Kenichi <em>544</em></strong> - Witch                    </div>
            </div>

So I'm after the actual image from that URL.

How do i go about this?

Thanks

Answer 1

Thanks to Hardip Patel for providing the start. Here is what I did:

• I took Hardips code and changed it to the following:

      Element featureImage = document.select("div.featurebox-image")
              .first();
      String temp = featureImage.getElementsByAttribute("style")
              .toString();
      // URL of image
      imageStrg = temp
              .substring(temp.indexOf("(") + 1, temp.indexOf(")"));
  

• After that it took alittle looking about StackOverflow to find out how to set it. I initially tryed to set it using the URL using the setImageURI() method, but that was throwing an error. See here for why. Instead I used that SoH's answer to create a bitmap from the URL:

  // Method to return a bitmap from an images URL
  private Bitmap getImageBitmap(String url) {
  Bitmap bm = null;
  try {
  
      // See what we are getting
      Log.i(TAG, "" + url);
  
      URL aURL = new URL(url);
      URLConnection conn = aURL.openConnection();
      conn.connect();
  
      InputStream is = conn.getInputStream();
      BufferedInputStream bis = new BufferedInputStream(is);
      bm = BitmapFactory.decodeStream(bis);
  
      bis.close();
      is.close();
  } catch (IOException e) {
      Log.e(TAG, "Error getting bitmap", e);
  }
  return bm;
  

  }

• After that I just had to set the Bitmap from earlier and update the image view using the ASyncTask's onPostExecute() method:

  imageOne = getImageBitmap(imageStrg);
  
  @Override
  protected void onPostExecute(String result) {
      // Write the result (document title) to the textview
      super.onPostExecute(result);
  
      // Update the textview with results
      if (result == null) {
  
          txtVwDocTitleValue.setText("Nothing to report...");
      } else {
          txtVwDocTitleValue.setText(result);
          txtVwDocURLValue.setText(imageURL);
  
          // Set the views image
          imgVwManga1.setImageBitmap(imageOne);
      }
      // Destroy the progress bar
      stopProgressDialog();
  }
  

Cheers all!