title: Android webview images not showing after loading once
body: <p>In android, I'm loading a local html with local images into a webview.  On the emulators and even on one newer android device I tested, everything works fine - there are no problems.  However, I have a much older device (with android 2.3.4) that has an issue.  When I first load the html file, the images display fine.  When I click the phone back button, then navigate back to the page, the images disappear.  I'm trying to figure out if this is a common problem or just a problem with an old phone.</p>
  
  <p>Here is the loading file:</p>
  
  <pre><code>    w = (WebView) findViewById(R.id.webview1);
      w.getSettings().setJavaScriptEnabled(true);
      w.getSettings().setBuiltInZoomControls(false);
      w.getSettings().setDefaultTextEncodingName("utf-8");
  
      InputStream is;
      try {
          is = getAssets().open("Learn/TrigGraphing.html");
  
          int size = is.available();
  
          byte[] buffer = new byte[size];
          is.read(buffer);
          is.close();
  
          String str = new String(buffer);
  
          w.loadDataWithBaseURL("file:///android_asset/Learn/Images/", str, "text/html", "utf-8", "file:///android_asset/Learn/TrigGraphing.html");
  
      } catch (IOException e) {
          // TODO Auto-generated catch block
          e.printStackTrace();
      }
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;img id="img03" class="images" src="file:///android_asset/Learn/Images/UnitCircle10.png"/&gt;
  </code></pre>
  
  <p>There is also one twist - I resize the images if they're too big to fit on screen.  This is mainly for tablets.  On the html body onload() function, I execute the following javascript:</p>
  
  <pre><code>function checkImgSize() {
  if($(document).width() &gt; $(window).width()) {
  
      windowWidth = $(window).width();
  
      var elements = document.getElementsByClassName("images");
      for (var i=0; i&lt;elements.length; i++) {
  
          currentImgWidth = elements[i].width;
          currentImgHeight = elements[i].height;
  
          newImgWidth = Math.round(0.85*windowWidth);
          newImgHeight = (newImgWidth/currentImgWidth)*currentImgHeight;
  
          elements[i].style.width = newImgWidth;
          elements[i].style.height = newImgHeight;
  
      }
  }
  </code></pre>
  
  <p>I looked at this resize function and I dont see why it would make the images disappear if they loaded a second time but I'm not sure.  Anybody have any advice?</p>