Android WebView不显示HTML字符串中的图像

时间:2015-04-06 15:40:34

标签: javascript android html webview

我正在尝试使用Android WebView加载“网页”,但图片无法加载。首先,我检索一个在Markdown中格式化的文本字符串。然后,我使用Markdown4J将Markdown转换为HTML,然后使用Android WebView的loadDataWithBaseUrl()函数,我使用html加载WebView。

String html = null;
        try {
            html = new Markdown4jProcessor().process(mText);
        } catch (IOException e) {
            e.printStackTrace();
        }
        String css = "<link rel=\"stylesheet\" type=\"text/css\" href=\"blogstyle.css\" />";
        final String htmlData = css + html;
body.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);

除了图像之外,webview中的所有内容都会显示并且格式正确。图像不会显示,HTML中肯定有图像标签,例如

<img src="https://www.random.org/analysis/randbitmap-rdo.png">

我不知道为什么我的WebView无法显示此图像?

编辑:已经请求清单中的互联网权限。这是一个示例降价字符串的示例。然后我将此行转换为HTML。

"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    <linkref=\"import\"href=\"gitcard.html\">\n    <github-carduser=\"nasawa\">\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`<google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"></google-maps>`\n \n\nAnd a complicated Google Maps component looks like this:\n\n\n    <google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers>\n    <google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"\n    draggable=\"true\"title=\"Go Giants!\"></google-map-marker>\n    <google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"></google-map-marker>\n    </google-map>\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"

这会在HTML中给我以下内容:

<p>"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.</p>

<p> </p>

<p>The solution to this problem? <a href="http://webcomponents.org/"><strong>Web Components</strong></a>. Now you should know up front that Web Components don’t work in IE and Safari, but they <em>are</em> under development.</p>

<p> </p>

<p>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.</p>

<p><img src="https://www.ruralsourcing.com/wp-content/uploads/2014/09/blog-image-265x300.png" alt="blog-image" title="" /></p>

<p>So what if I told you <em>all the code for what you see is two lines?</em> Just these two:</p>

<p> </p>

<pre><code>&lt;linkref=\"import\"href=\"gitcard.html\"&gt;
&lt;github-carduser=\"nasawa\"&gt;
</code></pre>

<p>And that’s all. Just import the html and use the custom element! Using a new templating system called <em>Shadow DOM</em>, the browser holds a template called <em>github-card</em> 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 <em>github-card</em> tag wherever you want, as many times as you want, and data will not transfer over.</p>

<p> </p>

<p>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:</p>

<p> </p>

<p><code>&lt;google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"&gt;&lt;/google-maps&gt;</code>
 </p>

<p>And a complicated Google Maps component looks like this:</p>

<pre><code>&lt;google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers&gt;
&lt;google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"
draggable=\"true\"title=\"Go Giants!\"&gt;&lt;/google-map-marker&gt;
&lt;google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"&gt;&lt;/google-map-marker&gt;
&lt;/google-map&gt;
</code></pre>

<p> </p>

<p>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!</p>

<p> </p>

<p>Christopher Johnson <br />
 Jr. Associate Programmer"</p>

0 个答案:

没有答案