Online Images
By Richard Rost
4 years ago
How to Display Online Images in Access Forms
In this Microsoft Access tutorial, you will learn how to display online images and web pages in your database using the Web Browser control.
Brenda from Anchorage, Alaska (a Gold Member) asks: I loved your ASP Upload Seminar. I have all of the images for my various products stored in a folder on my server just like you showed. They display perfectly on my website. Now is there any way I can display those same images in my Access database in the office? I've tried using the technique you show in your Images video using the Picture Control, but that doesn't work.
Update!
Microsoft released the new Edge Browser Control after this video was produced. You will find it's much easier to use, displays modern webpages better than the old browser, and you can use it to show pictures in continuous forms and reports. Check out my new video:
Members
Members will learn how to zoom in and out to resize that picture properly for the Web Browser control, and to save that zoom level in the customer record. We'll also hide the browser if there's no image to display.
Silver Members and up get access to view Extended Cut videos, when available. Gold Members can download the files from class plus get access to the Code Vault. If you're not a member, Join Today!
Recommended Course
Pre-Requisites
Links
 Keywords
access 2016, access 2019, access 2021, access 365, microsoft access, ms access, ms access tutorial, #msaccess, #microsoftaccess, #help, #howto, #tutorial, #learn, #lesson, #training, #database, Show pictures directly from URLs in Access forms and reports, Load pictures from URL in MS Access Image control, Display an Image using its online URL, Display Web Images in Access Forms and Reports
Subscribe to Online Images
Get notifications when this page is updated
Intro
In this video, I will show you how to display online images and web pages in your Microsoft Access database using the Web Browser control. We will talk about how to store image file names in your tables, build a query to generate the correct online image URLs, and set up your forms to display those images directly from the web. You will also see how to work with different file types like images, HTML, and text files right inside your Access forms, all without the need for advanced prerequisites or previous lessons.
Transcript
Welcome to another TechHelp video brought to you by AccessLearningZone.com. I am your instructor Richard Rost and it's great to be back after a week off from Hurricane Inn.
In today's video, I'm going to show you how to display online images and whole web pages in your Microsoft Access Database using the Web Browser control.
Today's question comes from Brenda in Anchorage, Alaska, one of my Gold members. Brenda says, "I love your ASP Upload Seminar. I have all of the images from my various products stored in a folder on my server just like you showed. They display perfectly on my website. Now is there a way I can display those same images in my Access Database in the office? I've tried using the technique you show in your images video using the picture control, but that doesn't work."
There's a lot to unpack with this question. Let me give you some background first for those of you who aren't familiar with my other videos.
I've made a seminar a little while ago that shows you how to connect your Access Database locally to SQL Server on a website. That way you can have your customers, your products, all that stuff stored on the web, but you can access it from any location in multiple offices using your Access Database. You can also use that information to feed your website so you can display all your customers, your products, whatever, on your website too.
The problem is this seminar doesn't cover how to upload images. If you want product images or customer pictures or any of that stuff, that's not covered. So I released this template, which shows you how to use ASP Upload to upload pictures to your database - to your website, basically. You can take pictures from your local computer, upload them to your website, store that information in the database, what the picture name is and such, and then you can display that on your website. That's the same thing I do on my website, for example, if people want to upload screenshots into my forums for their questions and such.
Now the problem with this is that you can't display that picture easily in your local Access Database. I've got a whole video that shows you how to display local images that are stored on your computer or at least in your office network, and you can display those just fine in your Access Database, but you can't use this technique to show pictures that are on the web.
In today's video, what I'm going to show you how to do is take those pictures that are on a website, any website, and display those in your Access Database using the Web Browser control.
You don't have to have had my Access SQL Server Seminar or the ASP Upload lessons. You don't need all that. If you have pictures on the web that you want to show in your database, this technique will work just fine for you, but I wanted to give everyone the background first so you know what it is exactly I'm doing - basically allowing Microsoft Access to show pictures that are on the web. That's it.
Of course, if you are interested in more information on getting your Access Database online, I'll put links to all those different seminars and templates down below. You can click on them and get more information.
Before we get started today, I have a couple of prerequisite videos for you to go watch. These are free videos. You should know how to make calculated query fields. You should know about string concatenation, which is putting two or more strings together. You're going to need to know a little bit of VBA, some VBA programming. If you've never programmed before, don't worry. It's not scary. Watch this video first, about 20 minutes long. It will teach you everything you need to know to get started with VBA. It's free. You should know how to use the if function, the immediate if. Basically, to put an if then statement in a function. Go watch those videos if you haven't seen any of those before. If you don't know what these things are, go watch that, come back.
Here I am in my TechHelp free template. This is a free database. You can download a copy from my website if you want to. Instead of products, let's say I want to put customer pictures in my database. I've got all these customer pictures stored on my website in an images folder. But you can use product pictures, pictures of cars, starships, whatever you want to do. Whatever pictures you want to display, you can display in your database.
This technique that I'm going to show you also works with some different file types. You can show web pages, HTML files, and you can show text files if you want to. Now some types of files like PDF files will try to download if you use this technique. When you go to visit it, the browser is going to try to download that PDF file, which isn't usually what you want. This is pretty much for simple web pages or pictures. I use it for pictures a lot. Yes, it will even work with animated GIF files. That's pretty cool.
The first thing we have to do is add the file name to the customer table or whatever table you're using - the product table, obviously. Come down here. I'm going to put in here customer image like that. That will be a short text field. Not just image, not just picture. Those are reserved words. You'll get in trouble with those. So use customer image or product image or product picture or whatever you want.
Now if all of your images are in the same folder, which is what I do personally - I put them all in my upload images folder. For me, the website, I've got just an images folder. I dump them all in there. If you want to have them in different folders, you can store the full path name to them. So it could be images/customers/customer1.jpeg, whatever. But I'm just going to assume that all of my images are in the same folder. So all I'm going to store in the customer image field is just the name of the file itself because they're all in the same folder.
Let's save this table, close it down, and go to the customer form. I'll open this guy up in design view. Let's add that field in here. I'm just going to copy and paste country. That's Control C, Control V if you didn't know that. Let's change this to say image. You can just have image here, that's fine. Change the control source to customer image and also change the name.
Save it.
Just for class purposes, I'm going to delete all this stuff over here. We don't need it. I want some room to put my picture. Save this and let's put some file names in here for our images.
I've got some images already set up on my website. I know what the file names are. These were uploaded, let's say, by my employees and they put the customer profile pictures online, or maybe the customers did themselves using your ASP Upload pages. They set up their own profile pictures, whatever. If you're using an online database, then this customer table would be connected to your database on the server, so that image would already be in there, that image file name.
So mine is, for example, Richard.jpeg.
One thing I don't like about this particular database is I don't like that cycle goes to the next record. So I'm going to go to Other and set Cycle to Current Record. It's one setting that I usually change. Most people don't have databases like that, so I leave it for beginner databases.
When I'm done with the last field, it cycles back at the beginning. If I want to go to the next record, I do it myself.
Next up is Jimmy Kirk, so that's Kirk.jpeg.
Just to show you where I'm getting these names from:
Here's my website. I've got a folder set up called images on my folder. In there, I've got Richard.jpeg, and there it is. You can display that directly on the web in other pages, or we're going to use this URL and display that using the Web Browser control in our Access database. Then I've got another one here: Kirk.jpeg.
That's where I'm getting those file names from. We're going to tack on the complete URL of that folder in just a minute using a query.
Who else do I have? I have Picard, of course. Just to show you that you can do some other file types, I've got for Riker: let's do junk.htm. That will be an actual HTML file. And let's do one more. I'll show you a spinning animated gif. I've got a 599cd.gif logo.
You can do text files too. If you have any text files, like test.txt, I'll show you what happens if you try to access a PDF file. I've got my w9.pdf online.
So I have the file names in here. Now let's make a query to tack on that URL at the beginning.
Do you have to use a query? No. You could put this directly in the Web Browser control, but I like doing it in a query. So that's how we're going to do it.
Go to Create > Query Design. Bring in my customer table, close that dialog. Bring down the star, bring down all the fields. Then right here, we're going to make a calculated query field. I'm going to use Shift+F2 to zoom in so you can see this a little better.
We're going to create a new field, a calculated query field called image location (imageloke:). That's going to be set equal to in quotes "http" or "https" in my case, "://599cd.com/images/" close the quotes, ampersand, and then customer image. That actual image field is going to go there. So this will be 599cd.com/images/richard.jpg, for example.
There's your calculated field. Save that. I'm going to run it. I didn't save it. Let me give it a name: customerQ for query.
Run it. Let's slide to the right. There we go. Now down here, we're missing file names, so I want this to be just null if this is null. So we can use our little if function, our immediate if function. That's why I wanted you to learn that first.
Go back to design mode. Come in here, Shift+F2 to zoom in. I'm going to come right there and say: IIf(IsNull([CustomerImage]), Null, "https://599cd.com/images/" & [CustomerImage])
So read it like an if then statement: If CustomerImage is null, then set ImageLoke equal to null. Otherwise, if it's not null, set it equal to this whole thing. That's how that reads. So it's checking: value if it's true, value if it's false.
Save it, and let's run it again. Slide to the right, and you can see now that's null there too. If you put in just the path to the folder, then it will either display that page if there is a page there, or it will give you an error if there's nothing there.
So we've got our field all set to go. Now, this is a calculated field, so it's not editable. If you try clicking right now, it says it can't be edited. That's fine. Make sure you can still edit the rest of this. Whenever you put calculated fields in queries, sometimes if your query gets too complicated, you can no longer edit the query. So make sure you can still edit it.
Let's put that field here on the form. We have to change where this form gets its data from: its record source. Go to the data tab, change this from CustomerT to CustomerQ.
Then we're going to go over here and put a field over here. I'll copy this one, copy and paste. I'm going to delete that label. I'm going to slide this over here. You can either put it below it, like I like to do, or you can put it above it if you want it to look like a URL bar. That's why you build your own database, so you can do whatever you want.
Let's open this guy up. Change the control source to image location. Copy and paste in the name.
Close that.
Now, this isn't editable. I don't want the user thinking they can edit it. So let's make that gray, visually telling the user, hey, you can't change that.
Now it's time for the grand finale. It's time to put the Web Browser control right here.
Go to form design. Drop this guy down. There's the Web Browser control right there.
This control was added in Access 2016 or 2013, one of those versions. There is an older Web Browser control that this might work for. I think it will. It's been a long time since I've used it. I know it's got some different VBA properties, but I think the control itself still works the same way. So if you've got an older version of Access, you can probably get away with this, but I know it's at least in 2016. So this alone is reason enough to upgrade if you have an older version. You won't be able to do this otherwise.
Drop this guy here. It's going to ask you to type in an address where you want the hyperlink to go. Just hit Cancel. We don't need to do that. We just want the browser control because you can set it on a static page. If you want the user to start browsing on your home page or on a particular page you've set up on your server, you can do that, but we're going to control this ourselves.
Open up the properties. Now, I don't like the name WebBrowser34. You can just make it WebBrowser, or I'm going to make this just WB. It's the WB, not the channel or the movie people. Because in my VBA code, which I'll be doing with the extended cut for the members, I don't like always typing out webbrowser.something. It's easier to go WB, and I know what WB means - web browser.
Drop the control source down, come in here and pick image location. Close that, save it, open it up, and there I am.
There's me. I'll move to the right, and there's that handsome devil.
You might need to make your browser bigger to fit your pictures. I'll make it bigger this way, size it this way, make it whatever dimensions you want. Obviously, you will want to make sure your pictures on your website are all relatively the same size. If they're not, you can zoom in and out here. For example, watch this: zoom in, zoom out, go to Kirk, zoom out, zoom back in. Notice as I move from record to record, that zoom ratio stays. You can set that wherever you want to, zoom in some more, leave it, or come back to it, and that zoom stays.
This, I'm going to show in the extended cut for the members. You will learn how to zoom in and out. There is no automatic zoom for the Web Browser control. Unfortunately, you can't just have it automatically zoom to the dimensions of the picture. I tried. If anyone knows of a way, let me know. I'll make a video out of it and give you credit for it. But I Googled this for half an hour. You can manually zoom in and out and set the picture however you want it and then save that setting in the table, so the next time someone is browsing, it will just zoom to that level that you set. I'll also show you how to hide the image if one doesn't exist.
I also promised you I would show you a couple of other file types. Here's Picard. There's the junk.htm - that's just an HTML file. HTML, ASP files work fine.
There's a 599cd.gif - that's an animated gif that will display just fine too. This is an old one. Back when I used to sell CDs. It's been a long time since I made an animated gif. I used to do banner ads on different websites. Yes, that's where the name comes from. I used to sell CDs with my hour-long lessons on them for $5.99, and that included shipping. That's a pretty good deal.
There's a text file - images.txt.
Now, here's one thing that will happen: if you do have JavaScript on that page, it will likely generate an error. You don't want just people browsing anywhere. I also Googled for an hour to try and figure out a way to suppress this error message. I couldn't figure it out, so I'll just leave this in here so it will display it for you. Do not create more messages, say no. If it does generate, it will at least go to that page and display whatever. There's my images page.
What else do we have? Same thing, this is a W9 form - it's a PDF file. If you browse to a PDF file, it will try to download the image, which you might want, but generally, you don't, so I'm going to cancel that.
Of course, if we have no image specified, you'll just get "the address is not valid." Again, in the members edition, I'm going to show you how to hide this browser control if there is no image specified. Here's the member database again. If I go to a record that doesn't have a picture, it just hides that, and you can hide all these controls too. We just use the Visible property, but I'll cover that in the extended cut.
Once again, check out the extended cut for the members - only Silver members and up. Remember, you get access to all of my extended cut videos. There are almost 300 of them right now, so there is a lot of stuff to watch for a very, very low monthly fee. I know, I have puppies to feed.
Join my YouTube channel. Gold members, don't forget you can download these databases off my website as well, plus you get extra free classes every month. There are lots of benefits to joining. You can find out more on my website, or just click that blue Join button, whether you're on YouTube or my website. Doesn't matter. Give it a click.
So that's it for your TechHelp today. I hope you learned something and we'll see you next time.
Quiz
Q1. What is the main purpose of the tutorial presented in this video?
A. To display local images stored on your computer in Microsoft Access
B. To upload files directly from Access to a website
C. To display online images and web pages in an Access database using the Web Browser control
D. To export Access data into HTML web pages
Q2. Why does Brenda's method using the picture control not work for displaying web-based images in Access?
A. It only works with GIF images
B. It is limited to images stored locally or on a network, not images accessed via the web
C. It requires VBA programming
D. It can only show images for forms, not reports
Q3. What must you add to your customer or product table to display web-based images?
A. A hyperlink data type field
B. The file extension in the existing picture field
C. A short text field to store the image file name
D. The entire image binary data
Q4. Why is it important not to use field names like "image" or "picture" in Access tables?
A. They are unsupported in queries
B. They are reserved words in Access and can cause issues
C. They are not descriptive enough
D. They require special formatting
Q5. What technique is used to combine the folder path with the image file name in order to create the full URL?
A. Linking tables
B. String concatenation in a calculated query field
C. Manual data entry on forms
D. Importing from Excel
Q6. Which function is used in the query to check for null values and handle the case where no image is specified?
A. Len()
B. Nz()
C. IIf()
D. Sum()
Q7. What property must be changed on the customer form after creating the query with the image URL?
A. Form view
B. Record source from CustomerT to the new query (e.g., CustomerQ)
C. Tab order
D. Control tip text
Q8. What version of Microsoft Access introduced the newer Web Browser control demonstrated in the video?
A. Access 2010
B. Access 2007
C. Access 2013/2016
D. Access 2019 only
Q9. When using the Web Browser control, how do you tell Access what to display for each record?
A. Set the background color of the control
B. Link the control source to the calculated image URL field
C. Add a macro to the form
D. Use a subform to show the image
Q10. Which of the following file types can be displayed using the Web Browser control method shown in the video?
A. Image files (JPG, GIF), HTML files, and text files
B. Only PDF files
C. Only PNG files
D. Only Microsoft Word documents
Q11. What occurs if you attempt to display a PDF file using this Web Browser control technique?
A. The PDF is displayed inside the form perfectly
B. The image is converted to a jpg
C. The browser control tries to download the file
D. An Access error message appears and halts execution
Q12. According to the video, what is one visual adjustment recommended for the field displaying the image URL on the form?
A. Hide the field completely
B. Make it bold and red for user attention
C. Set the background to gray, indicating it is not user-editable
D. Set the field as a combo box
Q13. What should you do if you want to display images located in different folders for different records?
A. Use only the file name
B. Store the entire path plus file name in your database
C. Store the file size
D. Use a text box to prompt for the location
Q14. What VBA concept is recommended as a prerequisite before attempting the steps in this video?
A. Creating custom Access ribbons
B. Knowing how to generate reports
C. Understanding basic VBA, calculated fields, string concatenation, and If functions
D. Using ActiveX controls for networking
Q15. What is one limitation of the Web Browser control described in the video regarding image display?
A. It cannot display dynamic content
B. There is no automatic zoom to fit the image dimensions
C. Only BMP images are allowed
D. It cannot be resized
Q16. What happens if JavaScript is present on the web page you are trying to display in the Web Browser control?
A. It displays perfectly
B. It generates an error message
C. It converts JavaScript to HTML
D. Access locks up
Q17. How does the video suggest hiding the Web Browser control if there is no image for a record? (as explained in the members' section)
A. By using the Visible property in VBA
B. By setting its background color to white
C. By minimizing it to a button
D. By removing it from the form controls list
Answers: 1-C; 2-B; 3-C; 4-B; 5-B; 6-C; 7-B; 8-C; 9-B; 10-A; 11-C; 12-C; 13-B; 14-C; 15-B; 16-B; 17-A
DISCLAIMER: Quiz questions are AI generated. If you find any that are wrong, don't make sense, or aren't related to the video topic at hand, then please post a comment and let me know. Thanks.
Summary
Today's video from Access Learning Zone focuses on how to display online images and entire web pages within your Microsoft Access database by using the Web Browser control.
This topic was inspired by a question from a student who enjoyed my ASP Upload Seminar and wanted to take the images stored on her server for her website and display those same images inside her office Access database. She tried using the picture control technique I normally show for displaying images, but found it did not work for web-based images.
Let me provide some background for those who may not have seen my earlier related seminars. I previously demonstrated how you can connect an Access database to a SQL Server back-end online. This lets you manage your customers, products, and other data from any location via Access, and even feed that same data to your website. However, that seminar did not cover uploading and handling images.
To solve the image-uploading issue, I created a template that shows how to use ASP Upload to take pictures from your local machine and upload them to your web server, storing the image file names in a database. This setup is useful for cases like allowing customers to upload images to their profile or posting screenshots in forums. But there's still a challenge: getting those remote web images to actually display in the local Access database, since the picture control method only works for images stored locally or on your office network.
Here, I will show you how to display images hosted on a website, or in fact any website, in your Access database using the Web Browser control. This technique does not hinge on you having seen my SQL Server or ASP Upload seminars. If you have web-hosted images and want to view them inside Access, these steps will work for you. My purpose is simply to demonstrate how you can allow Access to show images that reside online.
I encourage anyone interested in learning more about putting an Access Database online to visit my website for links to the related seminars and templates.
Before you proceed, it helps to be comfortable with calculated query fields, string concatenation (combining multiple text values together), and basic VBA. If you are new to VBA, I offer a free 20-minute introductory video—take a look at that first if you need it. You'll also want to understand how to use the Immediate If function (IIf) to handle conditional logic in your queries. If any of these concepts are unfamiliar, pause and review those videos before moving on.
To get started, I am using my free TechHelp template database, which is available for download from my website. Instead of using product images for this example, I'll focus on customer pictures, all of which I have uploaded to an images folder on my website. This technique is flexible enough to be used for product images, car images, or any other subject. It also works with simple web pages (HTML/ASP), and even text files. One caveat: certain file types like PDFs will try to download rather than display, which usually is not what you want from this setup. The best results come from using pictures and simple web content. Animated GIFs work as well.
First, you need a place in your customer (or product) table to store each image's file name. Add a new short text field—rename it to something like CustomerImage or ProductImage rather than simply Image or Picture, which are reserved words in Access and can cause problems.
If all your images are stored in the same folder online, as is the case with my images folder, you can just store the file name in this field. However, if you use multiple folders, you can instead store the full path. For simplicity, I'll assume you're only storing file names.
Save and close the table, then open your customer form in design view. Add the new field (for the image file name) to your form, either by copying and pasting an existing text box and updating its properties, or by creating a new one. Change its control source to tie it to your new CustomerImage field. For the purpose of this lesson, I removed unnecessary controls from the form to make room for the image viewer.
Next, populate a few sample image file names into the database. These could have been uploaded by your staff or the customers themselves via your web upload pages. If you were connected to an online server, these image file names would already appear in your customer data.
As an example, you might have file names like Richard.jpeg, Kirk.jpeg, Picard.jpeg, junk.htm for an HTML file, an animated gif like 599cd.gif, a plain text file, or even a w9.pdf. You can showcase different file types this way.
The next step is to create a query to concatenate the base URL of your images folder with the file name stored in the database. While you could handle this within the Web Browser control, I recommend setting it up in a query for clarity and flexibility. Create a new query, bring in all fields from your customer table, and add a calculated field that forms the complete web address for each image. Use the Immediate If function to check whether the CustomerImage is null—if it is, have your field return null; otherwise, concatenate the base URL and the file name.
Be sure to name and save this query. Run it to check your results—when CustomerImage is null, the calculated URL should also be null. This calculated field is not editable, but that's intentional here.
Now update your customer form so that its record source points to your query instead of the main table. Add the new ImageLocation field to your form, again by creating or duplicating a text box control, and set its control source accordingly. Make the field read-only and visually distinct, perhaps by setting the background to gray, to indicate to users that it's not for editing.
Now it's time to add the Web Browser control itself. Open the form in design view and insert the Web Browser control, which became available in Access 2016 or thereabouts. If you are using an older Access version, the control may still exist but might behave slightly differently. The process is largely the same: after inserting the control, cancel the prompt for a hyperlink address. Rename the control to something short like WB (for Web Browser) for easier reference.
Next, bind the Web Browser control's control source to the ImageLocation field you created in your query. Close and save the form. When you open it, you should now see your web-hosted images appear right inside Access. The control's dimensions are fully customizable to fit your images, but keep in mind that it is best if your online pictures all have similar sizes. If not, you can adjust the zoom manually using the browser control's built-in zoom. However, there is no native way for Access to automatically zoom pictures to fit the control's frame dynamically.
In today's Extended Cut for members, I will also demonstrate how to store and restore zoom levels, as well as how to hide the image control when there is no picture to display. If you want to suppress the browser or control its visibility based on whether a valid image exists, you'll want to check out the members video. Additionally, I'll show you how to avoid errors that can pop up when viewing certain file types, like PDFs or pages that trigger JavaScript alerts.
You can also use this technique to display animated GIFs and even simple web pages or text files. Just keep in mind that trying to display PDFs will usually prompt the browser to download the file rather than show it directly. Also, empty file names in your data will result in a "the address is not valid" message from the browser control—again, the extended tutorial covers how to elegantly hide the control in these cases.
If you would like to access additional resources for learning about Linked Tables, SQL Server, ASP Upload, or more advanced Access techniques, be sure to visit my website for detailed courses and downloads. Silver Members get extended cut videos, and Gold Members can download all these databases and enjoy regular bonus content. Joining is easy and you'll find plenty of helpful classes and examples.
That covers today's TechHelp lesson. You can find a complete video tutorial with step-by-step instructions on everything discussed here on my website at the link below. Live long and prosper, my friends.
Topic List
Adding a web image file name field to a table
Concatenating URLs using a calculated query field
Using the Immediate If (IIf) function in queries
Changing a form's record source to a query
Adding the image location field to a form
Setting form controls as read-only for display
Adding and configuring the Web Browser control
Binding the Web Browser control to a query field
Displaying online images in Access forms
Displaying other online file types (HTML, GIF, TXT)
Behavior of the Web Browser control with PDF files
Handling records without image links in the browser control
|
