title: Android WebView does not display Images from an HTML String
body: <p>I'm trying to load a "webpage" using the Android WebView but the images won't load. Firstly, I retrieve a text String that's formatted in Markdown. Afterwards, I convert the Markdown into HTML using Markdown4J, and then using the Android WebView's loadDataWithBaseUrl() function, I load the WebView with the html.</p>
  
  <pre><code>String html = null;
          try {
              html = new Markdown4jProcessor().process(mText);
          } catch (IOException e) {
              e.printStackTrace();
          }
          String css = "&lt;link rel=\"stylesheet\" type=\"text/css\" href=\"blogstyle.css\" /&gt;";
          final String htmlData = css + html;
  body.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
  </code></pre>
  
  <p>Everything in the webview displays and is formatted properly except the images. The images just won't show, and there are definitely image tags inside of the HTML, such as </p>
  
  <pre><code>&lt;img src="https://www.random.org/analysis/randbitmap-rdo.png"&gt;
  </code></pre>
  
  <p>And I have no idea why my WebView wouldn't be able to display this image?</p>
  
  <p>EDIT: The internet permissions in the manifest is already requested. And here is an example of a sample markdown string. I then convert this line into HTML.</p>
  
  <pre><code>"One of the huge problems today with web development is that it isn’t modular; because of how CSS and HTML work, it’s extremely difficult to just drag and drop an element from one site into another without some very strange side-effects. Shape and size can be different, resources can fail to load based on relative paths, and you have to import at least a .html, .css and .js file for each element. Even with all that, there’s no guarantee you won’t have CSS or JavaScript collisions.\n\n \n\nThe solution to this problem? [**Web Components**](http://webcomponents.org/). Now you should know up front that Web Components don’t work in IE and Safari, but they *are* under development.\n\n \n\nSo, what are web components? Well, essentially, they are plug-n-play modules for the web. The picture here is actually a great example. If you’re familiar with web design, imagine how long this would take to make, even statically. You’d have to position the images, set the roundness, give a height to the three main elements, set the font colors… Basically, it’d take you more than five minutes to get this up-and-running.\n\n![blog-image](https://www.ruralsourcing.com/wp-content/uploads/2014/09/blog-image-265x300.png)\n\nSo what if I told you *all the code for what you see is two lines?* Just these two:\n\n \n\n\n    &lt;linkref=\"import\"href=\"gitcard.html\"&gt;\n    &lt;github-carduser=\"nasawa\"&gt;\n\n\nAnd that’s all. Just import the html and use the custom element! Using a new templating system called *Shadow DOM*, the browser holds a template called *github-card* with encapsulated styles and JavaScript. This way, even if you have elements named the same, there will never be any collision. And of course, you can have the *github-card* tag wherever you want, as many times as you want, and data will not transfer over.\n\n \n\nOn the other end, if you’re creating a web component, you can easily add as many customizable fields as you want to allow the user to modify your component at specific spots. For example, this is what the simplified Google Maps component looks like:\n\n \n\n\n`&lt;google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"&gt;&lt;/google-maps&gt;`\n \n\nAnd a complicated Google Maps component looks like this:\n\n\n    &lt;google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers&gt;\n    &lt;google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"\n    draggable=\"true\"title=\"Go Giants!\"&gt;&lt;/google-map-marker&gt;\n    &lt;google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"&gt;&lt;/google-map-marker&gt;\n    &lt;/google-map&gt;\n\n\n \n\nAs you can see, it is truly a great time to be in web development. Complex procedures are getting better and easier every day as we push closer to a true implementation of HTML5 and a unified multiplatform experience, and web components are a spearhead on that advancement. Look out for the next big thing – it’ll be here before you know it!\n\n \n\nChristopher Johnson  \n Jr. Associate Programmer"
  </code></pre>
  
  <p>which would give me the following in HTML:</p>
  
  <pre><code>&lt;p&gt;"One of the huge problems today with web development is that it isn’t modular; because of how CSS and HTML work, it’s extremely difficult to just drag and drop an element from one site into another without some very strange side-effects. Shape and size can be different, resources can fail to load based on relative paths, and you have to import at least a .html, .css and .js file for each element. Even with all that, there’s no guarantee you won’t have CSS or JavaScript collisions.&lt;/p&gt;
  
  &lt;p&gt; &lt;/p&gt;
  
  &lt;p&gt;The solution to this problem? &lt;a href="http://webcomponents.org/"&gt;&lt;strong&gt;Web Components&lt;/strong&gt;&lt;/a&gt;. Now you should know up front that Web Components don’t work in IE and Safari, but they &lt;em&gt;are&lt;/em&gt; under development.&lt;/p&gt;
  
  &lt;p&gt; &lt;/p&gt;
  
  &lt;p&gt;So, what are web components? Well, essentially, they are plug-n-play modules for the web. The picture here is actually a great example. If you’re familiar with web design, imagine how long this would take to make, even statically. You’d have to position the images, set the roundness, give a height to the three main elements, set the font colors… Basically, it’d take you more than five minutes to get this up-and-running.&lt;/p&gt;
  
  &lt;p&gt;&lt;img src="https://www.ruralsourcing.com/wp-content/uploads/2014/09/blog-image-265x300.png" alt="blog-image" title="" /&gt;&lt;/p&gt;
  
  &lt;p&gt;So what if I told you &lt;em&gt;all the code for what you see is two lines?&lt;/em&gt; Just these two:&lt;/p&gt;
  
  &lt;p&gt; &lt;/p&gt;
  
  &lt;pre&gt;&lt;code&gt;&amp;lt;linkref=\"import\"href=\"gitcard.html\"&amp;gt;
  &amp;lt;github-carduser=\"nasawa\"&amp;gt;
  &lt;/code&gt;&lt;/pre&gt;
  
  &lt;p&gt;And that’s all. Just import the html and use the custom element! Using a new templating system called &lt;em&gt;Shadow DOM&lt;/em&gt;, the browser holds a template called &lt;em&gt;github-card&lt;/em&gt; with encapsulated styles and JavaScript. This way, even if you have elements named the same, there will never be any collision. And of course, you can have the &lt;em&gt;github-card&lt;/em&gt; tag wherever you want, as many times as you want, and data will not transfer over.&lt;/p&gt;
  
  &lt;p&gt; &lt;/p&gt;
  
  &lt;p&gt;On the other end, if you’re creating a web component, you can easily add as many customizable fields as you want to allow the user to modify your component at specific spots. For example, this is what the simplified Google Maps component looks like:&lt;/p&gt;
  
  &lt;p&gt; &lt;/p&gt;
  
  &lt;p&gt;&lt;code&gt;&amp;lt;google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"&amp;gt;&amp;lt;/google-maps&amp;gt;&lt;/code&gt;
   &lt;/p&gt;
  
  &lt;p&gt;And a complicated Google Maps component looks like this:&lt;/p&gt;
  
  &lt;pre&gt;&lt;code&gt;&amp;lt;google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers&amp;gt;
  &amp;lt;google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"
  draggable=\"true\"title=\"Go Giants!\"&amp;gt;&amp;lt;/google-map-marker&amp;gt;
  &amp;lt;google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"&amp;gt;&amp;lt;/google-map-marker&amp;gt;
  &amp;lt;/google-map&amp;gt;
  &lt;/code&gt;&lt;/pre&gt;
  
  &lt;p&gt; &lt;/p&gt;
  
  &lt;p&gt;As you can see, it is truly a great time to be in web development. Complex procedures are getting better and easier every day as we push closer to a true implementation of HTML5 and a unified multiplatform experience, and web components are a spearhead on that advancement. Look out for the next big thing – it’ll be here before you know it!&lt;/p&gt;
  
  &lt;p&gt; &lt;/p&gt;
  
  &lt;p&gt;Christopher Johnson &lt;br /&gt;
   Jr. Associate Programmer"&lt;/p&gt;
  </code></pre>