Loading images into WebView website from Amazon S3

Question

Problem: I've a website I'm trying to display in an Android WebView. The text appears fine, but the pictures seem to be blank. After further investigation, the site uses image storing on the Amazon S3 storage space. The images are then retrieved every time from servers the page is loaded. Any help will be appreciated, code and pictures are below.

Pictures:

In Browser

In App

Code from trying my best to debug the WebView activity. Please note, this was my first time using the chrome debugging for Android Webview. I narrowed it down to the profile picture code for now to see what was happening. Profile picture URL in the code shows up fine, but the picture itself does not show up. Code is below:

<div class="profile-photo pull-right"><img src="http://realzim.s3.amazonaws.com/file/user/realzim/India/25/user_image/1440307265.jpg" width="55" height="55" class="img-thumbnail"></div>

Error code(s):

Mixed Content: The page at 'https://www.realzim.com/mobile/' was loaded over HTTPS, but requested an insecure image 'http://realzim.s3.amazonaws.com/file/user/realzim/India/25/user_image/1440307265.jpg'. This request has been blocked; the content must be served over HTTPS.

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher

If I did get the wrong bit, please let me know. It's my first time working with this type of issue. Input will be greatly appreciated, thanks.

There is nothing "non traditional" about storing images on S3. Perhaps there is mixed-content on the page, and this would fix your situation: http://stackoverflow.com/questions/30424310/android-webview-image-not-loaded In general I would recommend learning to debug your code and find the related error messages instead of just dumping all your code on here and expecting someone else to figure it out. https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/webviews?hl=en — Mark B, Mar 19 '16 at 18:20
@MarkB thanks for your reply. The problem is, I've no idea which part of the code is causing the error. Like I said, I did research into this, and most of the queries of similar nature were focused more on loading an image from one specific URL instead of a website. I appreciate the links, I'll have to try them out and post an update. — Mohit G, Mar 19 '16 at 18:45
If i search for "Android Webview not loading images" I find TONS of answers saying to enable mixed content, which is what my first link is regarding. You should have come across that already if you searched for this issue. Secondly, it shouldn't matter that you have no idea which code is causing the error, you should still be able to use the debugger to see what the exact error is, which is what my second link is regarding. — Mark B, Mar 19 '16 at 18:52
@MarkB, actually my search query dealt with Amazon S3 specifically in there, hence my results were different from yours. Regardless, I've updated the code in the question. If you're still interested please check the original post. Thank you. — Mohit G, Mar 20 '16 at 02:38
Did you try the solution for mixed content? Did you check the net tab or console tab in the debugger to see what the error message is? — Mark B, Mar 20 '16 at 03:03
@MarkB, I checked the net tab. Good thing you caught that, I've updated the original posting with the errors the Network tab shows. I checked under the "Img" specifically and it showed a lot of errors regarding mixed content (most seemed to be the same). — Mohit G, Mar 20 '16 at 04:09
@MarkB, posted the solution that worked for me. Please check it out if interested. Thank you for helping and introducing me to the wonderful debugging tool in Chrome. — Mohit G, Mar 20 '16 at 04:51

score 0 · Accepted Answer · edited May 23 '17 at 12:31

Okay, so I think I've got it. First of all, a big thank you to Mark B for introducing me to the wonderful Chrome debugging tool as well as pointing me in the right direction.

In the original question I've posted up two errors I come across. After knowing what the problem exactly was, and doing a bit more research I managed to implement an effective solution. Below is the code that helped solve this issue:

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }

This basically helps set the mixed content on always for any phone running KITKAT SDK or above.

Hope this solution is able to help someone else out in the future.

Resource:

StackOverflow - Android WebView blocks redirect from https to http

Loading images into WebView website from Amazon S3

1 Answers1