How to display image from javascript in Android web view

Question

I want to display content from remote URL in android web view, which will be return by java script tag. In my case , java script tag return image , which should be load into web view. Here is code to render image/content from remote URL.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.webview);

    webView = (WebView) findViewById(R.id.webView1);
    webView.getSettings().setJavaScriptEnabled(true);

    String customHtml = "<script src='http://mytestdomain.com/test.php?w=300&h=250' type='text/javascript'></script>" ;         

    webView.loadData(customHtml, "text/html", "UTF-8");
}

URL load the content but image are broken and do not display properly. Though i can click on on the image and land into correct link.

I have proper permission

<uses-permission android:name="android.permission.INTERNET"/>

How can i fix it. Any help is appreciate.

Zeero0 · Accepted Answer · 2018-02-26 06:18:06Z

1

I think the issue is with your js code. I tried this code and image is showing fine.

<html>
<body>

    <h3>A demonstration of how to access an IMG element</h3>

    <img id="myImg" src="http://via.placeholder.com/350x150" alt="The Pulpit Rock" width="304" height="228">

    <p>Click the button to get the URL of the image.</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
        function myFunction() {
        var x = document.getElementById("myImg").src;
        document.getElementById("demo").innerHTML = x;
        }
    </script>

</body>

Also enable DomStorage:

 webView.getSettings().setDomStorageEnabled(true);

answered Feb 26, 2018 at 6:18

Zeero0

2,8101 gold badge24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vish Over a year ago

Your code is working fine.. I dont see any issue into my code as well. issue while loading image from my html is that , i am trying to load image from script tag (<script src='mytestdomain.com/test.php?w=300&h=250' ) which process third party url and generate image and wrap it inside document .write. So how can i overcome with this issue.

Zeero0 Over a year ago

I tried to run your code here jsbin.com/?html,output , the image is not showing there either.

Vish Over a year ago

Shared source url is dummy and will not produce any output. In my production , it generate proper image . I can not share prod url here due to privacy concern. SO, In order to reproduce the error , you can simply put above script wrapping inside document.write, in some of your domain and then point this url in script tag src. I hope , you will be able to see the issue.

Vish · Accepted Answer · 2018-02-27 07:50:26Z

0

Broken image issue because presence of protocol-relative url (//) for the image returned by our server. These kind of URLs (//:mytestdomain.com) will force the protocol to be the same as it's parent page, and the app's web view might be missing a base scheme for the image to inherit. I placed proper protocol into url and it working fine now

answered Feb 27, 2018 at 7:50

Vish

1111 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to display image from javascript in Android web view

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related