How To Load a Web Image Into a Picturebox In Visual Basic.net?

2017-08-25

Question

_{Friday, August 25, 2017 4:15 PM}

How To Load a Web Image Into a Picturebox In Visual Basic.net?

All replies (2)

_{Friday, August 25, 2017 4:39 PM ✅Answered}

How To Load a Web Image Into a Picturebox In Visual Basic.net?

This is one way: I put an image on my site here:

http://www.fls-online.net/VBNet_Forum/IMGP0964.JPG

Now I'll get the stream in a function and return an image:

Option Strict On
Option Explicit On
Option Infer Off

Public Class Form1
    Private Sub Form1_Load(sender As System.Object, _
                           e As System.EventArgs) _
                           Handles MyBase.Load

        Const url As String = _
            "http://www.fls-online.net/VBNet_Forum/IMGP0964.JPG"

        With PictureBox1
            .SizeMode = PictureBoxSizeMode.Zoom

            Dim img As Image = GetImageFromURL(url)

            If img IsNot Nothing Then
                .Image = img
            End If
        End With

    End Sub



    Private Function _
        GetImageFromURL(ByVal url As String) As Image

        Dim retVal As Image = Nothing

        Try
            If Not String.IsNullOrWhiteSpace(url) Then
                Dim req As System.Net.WebRequest = System.Net.WebRequest.Create(url.Trim)

                Using request As System.Net.WebResponse = req.GetResponse
                    Using stream As System.IO.Stream = request.GetResponseStream
                        retVal = New Bitmap(System.Drawing.Image.FromStream(stream))
                    End Using
                End Using
            End If

        Catch ex As Exception
            MessageBox.Show(String.Format("An error occurred:{0}{0}{1}", _
                                          vbCrLf, ex.Message), _
                                          "Exception Thrown", _
                                          MessageBoxButtons.OK, _
                                          MessageBoxIcon.Warning)

        End Try

        Return retVal

    End Function
End Class

It's not the only way but it's pretty simple.

"A problem well stated is a problem half solved.” - Charles F. Kettering

_{Friday, August 25, 2017 6:08 PM}

How To Load a Web Image Into a Picturebox In Visual Basic.net?

I'd like to show you one other way to do this -- it's a little more involved but you might like to use this way better if the online images are large or if the connection is slow.

As a preface, several years ago when I created the avatar that I'm using, I went through a few test versions of it. This is one of them:

http://www.fls-online.net/VBNet_Forum/Logo_05.png

It's about 25 megs so give it a bit to load (which is my point here, I might add).

With images that are slow to load for whatever reason, did you know that the PictureBox itself has a built-in method?

It's the .LoadAsync method and to do this right, you want to set the .WaitOnLoad property to false and handle the two events that you can subscribe to. I'll do just that in the following.

In my form, I first put a SplitContainer on it and set the split to be horizontal. That's docked full in the form.

In the upper panel (Panel1), I have a PictureBox docked full and in the lower panel (Panel2) I have a ProgressBar docked full:

Now I'll run it and let it load that image asynchronously.

Option Strict On
Option Explicit On
Option Infer Off

Public Class Form1
    Private Sub Form1_Load(sender As System.Object, _
                           e As System.EventArgs) _
                           Handles MyBase.Load

        Const url As String = _
            "http://www.fls-online.net/VBNet_Forum/IMGP0964.JPG"

        Const url2 As String = _
            "http://www.fls-online.net/VBNet_Forum/Logo_05.png"

        With ProgressBar1
            .Minimum = 0
            .Maximum = 100
        End With

        AddHandler PictureBox1.LoadProgressChanged, AddressOf PictureBox_LoadProgressChanged
        AddHandler PictureBox1.LoadCompleted, AddressOf PictureBox_LoadCompleted

        With PictureBox1
            .SizeMode = PictureBoxSizeMode.Zoom
            .WaitOnLoad = False
            .LoadAsync(url2)
        End With

    End Sub



    Private Sub _
        PictureBox_LoadProgressChanged(sender As Object, _
                                       e As System.ComponentModel.ProgressChangedEventArgs)

        With ProgressBar1
            .Value = e.ProgressPercentage
            .Refresh()
        End With

    End Sub



    Private Sub _
        PictureBox_LoadCompleted(sender As Object, _
                                 e As System.ComponentModel.AsyncCompletedEventArgs)

        SplitContainer1.Panel2Collapsed = True

    End Sub



    Private Function _
        GetImageFromURL(ByVal url As String) As Image

        Dim retVal As Image = Nothing

        Try
            If Not String.IsNullOrWhiteSpace(url) Then
                Dim req As System.Net.WebRequest = System.Net.WebRequest.Create(url.Trim)

                Using request As System.Net.WebResponse = req.GetResponse
                    Using stream As System.IO.Stream = request.GetResponseStream
                        retVal = New Bitmap(System.Drawing.Image.FromStream(stream))
                    End Using
                End Using
            End If

        Catch ex As Exception
            MessageBox.Show(String.Format("An error occurred:{0}{0}{1}", _
                                          vbCrLf, ex.Message), _
                                          "Exception Thrown", _
                                          MessageBoxButtons.OK, _
                                          MessageBoxIcon.Warning)

        End Try

        Return retVal

    End Function
End Class

When it first starts, you won't see the image because it's loading, but you will see the progress as it loads:

Once it loads completely, the other event will be raised and with that, I'll collapse that lower panel -- effectively removing the ProgressBar (more like covering it up, actually). Because the PictureBox is set to dock fully, the PictureBox covers up all remnant of the ProgressBar:

Something else to use if the need arises. :)

"A problem well stated is a problem half solved.” - Charles F. Kettering