Android Question Display Image From SD Card In WebView?

HimeAnator

HimeAnator

Member
Licensed User
Longtime User
I'm trying to load an image that is stored on the users SD card into a webview (created with designer). I get the webview to load but I cant seem to get the image to load. All I get is a blank white screen that I can zoom and scroll around.

The code I was able to come up with is below.
B4X: 
ImagePath = ("file:///" & File.DirRootExternal & "/SavedImages/" & TempName & ".jpg")
TempHtml = "<img style=" & "Max-width: " & maxWidth & "; height: auto; src='" & ImagePath & "'/>"
WebView1.LoadHtml(TempHtml)
Anybody have any Ideas?



Thank you in advance for any help
 
Last edited:
Sort by date Sort by votes
M

Mahares

Expert
Licensed User
Longtime User
The below code works. The internal SD card is referred to as File.DirRootExternal:
B4X: 
Sub Globals
    Dim TempName, ImagePath  As String
    Dim WebView1 As WebView
    Dim maxWidth As Int = 300
    Dim TempHtml As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("layout")  'has the webview1
    TempName="hime"   'name of file w/o extension
    ImagePath = (File.DirRootExternal & "/SavedImages/" & TempName & ".jpg")
    TempHtml = "<html><body><img style=" & "Max-width: " & maxWidth & "; height: auto; src=" & _
    ImagePath & "></body></html>"  'this works
    WebView1.LoadHtml(TempHtml)
End Sub
 
Upvote 0
J

JoeR

Member
Licensed User
Longtime User
Are you initializing your webview? If created with designer, you must not initialize it.

For simplicity of testing use:
B4X: 
TempHtml = "hello world"
This proves whether or not your webview is working - avoids any uncertainties about images and paths.

I am not sure, but think you may only need two slashes after file:
 
Upvote 0
HimeAnator

HimeAnator

Member
Licensed User
Longtime User
Mahares said:
The below code works. The internal SD card is referred to as File.DirRootExternal:
B4X: 
Sub Globals
    Dim TempName, ImagePath  As String
    Dim WebView1 As WebView
    Dim maxWidth As Int = 300
    Dim TempHtml As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("layout")  'has the webview1
    TempName="hime"   'name of file w/o extension
    ImagePath = (File.DirRootExternal & "/SavedImages/" & TempName & ".jpg")
    TempHtml = "<html><body><img style=" & "Max-width: " & maxWidth & "; height: auto; src=" & _
    ImagePath & "></body></html>"  'this works
    WebView1.LoadHtml(TempHtml)
End Sub
Click to expand...

:D Awesome it works! Thank you!!! I have one other question for you. I set maxWidth of the image to equal Activity.Width so that the image will fit in the webview and the height set to auto so it will keep it proportionate, but once the image loads its width is wider than the activity and webview window and I am unable to zoom out just in and scroll. Since the webview has a width set to the same as the activity(100%) shouldn't the image fit perfectly into the view?
 
Upvote 0
M

Mahares

Expert
Licensed User
Longtime User
To get the photo to fit the webview, you can use the below code for TempHtml:
B4X: 
TempHtml="<html><body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'><center>" _
& "<img src=" & ImagePath & " width='100%' height='100%'/></center>" _
& "</body></html>"

You can add this line to the code to fit the webview to the device screen:
B4X: 
WebView1.Height=Activity.Height    :WebView1.Width=Activity.Width

Or you can add this to the Designer script:
WebView1.SetLeftAndRight(0,100%x)
WebView1.SetTopAndBottom(0,100%y)

You still can zoomin/out, but when you let go it returns to the original fit. Someone may offer a better way.
 
Upvote 0
HimeAnator

HimeAnator

Member
Licensed User
Longtime User
Mahares said:
To get the photo to fit the webview, you can use the below code for TempHtml:
B4X: 
TempHtml="<html><body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'><center>" _
& "<img src=" & ImagePath & " width='100%' height='100%'/></center>" _
& "</body></html>"

You can add this line to the code to fit the webview to the device screen:
B4X: 
WebView1.Height=Activity.Height    :WebView1.Width=Activity.Width

Or you can add this to the Designer script:
WebView1.SetLeftAndRight(0,100%x)
WebView1.SetTopAndBottom(0,100%y)

You still can zoomin/out, but when you let go it returns to the original fit. Someone may offer a better way.
Click to expand...

Works great! You have been such huge help @Mahares! I can stop smashing my head into the wall now :D
 
Upvote 0
HimeAnator

HimeAnator

Member
Licensed User
Longtime User
Mahares said:
To get the photo to fit the webview, you can use the below code for TempHtml:
B4X: 
TempHtml="<html><body topmargin='0' leftmargin='0' marginwidth='0' marginheight='0'><center>" _
& "<img src=" & ImagePath & " width='100%' height='100%'/></center>" _
& "</body></html>"

You can add this line to the code to fit the webview to the device screen:
B4X: 
WebView1.Height=Activity.Height    :WebView1.Width=Activity.Width

Or you can add this to the Designer script:
WebView1.SetLeftAndRight(0,100%x)
WebView1.SetTopAndBottom(0,100%y)

You still can zoomin/out, but when you let go it returns to the original fit. Someone may offer a better way.
Click to expand...


Ok I've been working with the code for sometime now and I thought I had it working how I wanted it to, but after really experimenting with it, the pinch zoom is really finicky. When the user zooms and lets go it snaps back to it original size and that fine, but I noticed that when it snaps back the "+" and "-" zoom indicators still indicated that its zoomed in and this eventually causes it to stop zooming all together because it thinks that its already zoomed in all the way and you have to then zoom out until the "-" (magnifying glass zoom out button) becomes disabled showing that its no longer zoomed in. So my question is, is there a way to have the image stay zoomed in or programmatically zoom all the way out when the user stops touching the webview?
 
Upvote 0
You must log in or register to reply here.
Top