Images from SD Card is not loaded in the WebView

Question

I have the following HTML code loaded into a String.

<html>
    <body>
        <img style="width:100%" src="file://storage/emulated/0/sdcard/Download/Page1.jpg"/>
        <img style="width:100%" src="file://storage/emulated/0/sdcard/Download/Page2.jpg"/>
        <img style="width:100%" src="file://storage/emulated/0/sdcard/Download/Page3.jpg"/>
        <img style="width:100%" src="file://storage/emulated/0/sdcard/Download/Page4.jpg"/>
    </body>
</html>

And I am trying to load the html into a WebView in my app as follows.

webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", "");

I have the following permissions in the AndroidManifest.xml and made sure the permissions are granted.

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

I went through many answers in SO (e.g. this), but cannot seem to find a solution to load the images from SD Card into my WebView. I also made sure that the images are not corrupted (I can view those images using the Gallery app). Any thoughts?

I did not find any error in the logcat. However, a possible logcat related to this problem might be the following (I am not sure though).

W/cr_CrashFileManager: /data/user/0/com.example.myapp/cache/WebView/Crash Reports does not exist or is not a directory

Here is how it looks like when the WebView tries to load the images.

Thanks in advance for your time!

In my case, images loaded when i edit html image paths String basePath = Environment.getExternalStorageDirectory().getAbsolutePath().toString(); String imagePath = "file://"+ basePath + "/test.jpg"; You can edit your html file text dynamically with imagePath. — swati vishnoi, Nov 11 '19 at 06:54
`src="file://storage/emulated/0/sdcard/Download/Page1.jpg"` For that to work it should be `src="file:///storage/emulated/0/sdcard/Download/Page1.jpg"`. — blackapps, Nov 11 '19 at 09:40
`/storage/emulated/0/sdcard/Download/Page1.jpg` That is an impossible path. Which also has noting to do wit a removable micro SD card. You can check with the FIle class that the file does not exists in that path. Try `File file = new File("/storage/emulated/0/sdcard/Download/Page1.jpg"); if ( file.existst()) {...} else {...}`. — blackapps, Nov 11 '19 at 09:43
`/storage/emulated/0/sdcard/Download/Page1.jpg` You might have succes with `/storage/emulated/0/Download/Page1.jpg` — blackapps, Nov 11 '19 at 09:44

score 0 · Accepted Answer · answered Nov 12 '19 at 04:00

Instead of using Environment.getExternalStorageDirectory I used the /sdcard/Downloads which seems to solve the problem. So the final HTML which I generated that worked is the following.

<html>
    <body>
        <img style="width:100%" src="file://sdcard/Download/Page1.jpg"/>
        <img style="width:100%" src="file://sdcard/Download/Page2.jpg"/>
        <img style="width:100%" src="file://sdcard/Download/Page3.jpg"/>
        <img style="width:100%" src="file://sdcard/Download/Page4.jpg"/>
    </body>
</html>

Images from SD Card is not loaded in the WebView

1 Answers1