Pulling Images From A Database
Many Web applications today require to you manage images in pretty much the same way as other non-binary data types. Images have always played a central role in the Web, but the programming tools to manage them have never evolved at the same speed as the overall Web technology. For example, displaying an image still requires you to know its file name. But what if you have (or want to store) all the images in a database? The advent of ASP and DHTML straightened the road out, so today you can count on at least two approaches to serve Web images interactively and dynamically to your users.
Typically, you would use images either as a constituent data type of your Web application (say, a real-estate service, a travel agency, an e-commerce site, and so on) or simply to make more attractive pages. In the latter case, you may have users dynamically querying for images and need to figure out a way to satisfy them. In this article, I'll discuss two possible scenarios: querying images by file name and through the keys of a database . For both, I'll start by examining first the traditional ASP-based approach and then the more elegant solutions that DHTML avail.
Querying for GIF files
Let's suppose you have to retrieve an image file (no matter if GIF, JPEG, or BMP) starting from some input parameters. Since the result of the search is a file name, displaying it is as easy as setting the src attribute of an IMG tag. The content of the src attribute, though, may change over the session since the user decides at runtime which images he or she wants your application to display. A proper use of the Form.Action property and a bit of ASP code lets you solve the problem in a snap. In a file called, say, HTMLPictures.asp such a code accomplishes the task:
<form method="POST" action="HTMLPictures.asp" name="frm">
Image Name =
<input type="text" name="imgName" size=40 value=<%=request.Form("imgName")%>>
</input>
<input type="submit" value="Show" ></input>
</form>
<hr>
<img id="imgarea" src=<%=request.Form("imgName") %> >
As soon as the HTMLPictures.asp page gets loaded, it sets the input field with the content of the imgName parameter. (The first time, it'll be the empty string.) Clicking on the Show button causes the content of the form to be submitted via the POST method to the same ASP page. This time, though, it has a non-empty content to assign to the IMG's src property. As a result, you have an interactive page capable of displaying dynamically determined images. Such a solution works fine with either Internet Explorer or Netscape Navigator.
Applying Dynamic HTML
If browser compatibility is not an issue, I recommend another approach that fully leverages the power of Dynamic HTML. You could just add a few lines of scripting code to the Show button
<script>
function ShowImg() {
frm.imgArea.src = frm.imgName.value;
}
</script>
and have the same work done almost entirely on the client side. This can reduce the server round-trips to the minimum necessary to get the image file.
<form id=frm>
Image Name =
<input type="text" size=40 name="imgName">
</input>
<input type="button" value="Show" onclick="ShowImg()">
</input>
</form>
<hr>
<img id="imgArea">
This code won't work under any version of Netscape however and versions of Internet Explorer earlier than 4.0 also falter with DHTML; this solution doesn’t cause the page to refresh completely so that the overall UI is finer. It is vulnerable to a page refresh though. In fact, refresh your page and all your dynamic changes – by design – disappear.
Images Stored in Databases
The use of ASP is even more fundamental in case you need to extract the bytes of the image from a database file. Many databases, including Access and SQL Server (either 6.5 and 7.0 versions), let you store large binary objects (called blob s) in their fields. Such content can be retrieved later through any of the available data access programming interfaces (e.g. ADO).
To have an image on a HTML page you need an IMG tag. Such a tag has just the src attribute to let you specify the source of that content. Even if you usually assign it a GIF or JPEG file name nothing prevents you from writing something like this:
<img src="theImg.asp">
or
<img src="theImg.asp?imgCode='1234'">
What matters is that the browser receives a piece of content that has an image MIME type (e.g. image/gif , image/jpeg , etc). The ASP page can execute any code needed to identify and extract the image from any data source. It suffices that the content type of the data stream being returned to the client is set to image/gif or any other specific type. You can do that through the Response object. The following example (found in the download as theImg.asp ) demonstrates how to extract the binary content of a GIF image stored in a SQL Server database. The database is accessed through ADO 2.x :
<%
if request("imgCode") = "" Then response.End
response.Expires = 0
response.Buffer = True
response.Clear
response.contentType = "image/gif"
Set rs = Server.CreateObject("adodb.recordset")
strSQL = "select logo from pub_info where pub_id="
strSQL = strSQL & "'" & request("imgCode") & "'"
rs.Open strSQL, "DSN=PUBS;UID=sa"
response.BinaryWrite rs("logo")
rs.Close
Set rs = Nothing
response.End
%>
The table involved is pub_info while the database is identified by the DSN of PUBS . The logo field is a binary field that contains GIF images. Notice that for this code to work, you need to have all the bytes of a GIF file in the database field. In this way, the ASP page returns a valid stream of GIF data to the browser. The page identifies the image to load and return through the parameter imgCode . It matches the content of another database field pub_id used to locate the image.
Pages needing to employ images from a database should include code like this, found in HTMLPictDB.asp within the download:
<form method="post" action="HTMLPictDB.asp">
Image code:
<input type="text" name="imgCode" size=40 value=<%=request.Form("imgCode")%>>
</input>
<input type="submit" value="Show"></input>
</form>
<hr>
<img src="theImg.asp?imgCode=<%=request.Form("imgCode")%>" >
Such a page posts to itself any submit request, causing the IMG tag to refresh showing the image associated to the specified ID. This code is not browser-dependent.
What Changes with DHTML?
Basically, the helper ASP page ( theImg.asp ) does the job of retrieving the image while the POST method makes the main page interactive and capable of serving user's requests. With DHTML you could make this latter aspect more elegant and efficient. A little script
<script>
function show() {
showImg.src = "theImg.asp?imgCode=" + imgCode.value;
}
</script>
will tell the IMG tag where its own source is. The rest of the page is quite straightforward:
Image Code:
<input type="text" id="imgCode"></input>
<input type="button" value="Show" onclick="show()"></input>
<hr>
<img id="showImg">
You can find the full page using this code in the download as DHTMLPictDB.asp .
Some Final Notes
Although possible, extracting images from a DB is still a semi-clandestine technique not (yet?) supported by an explicit IMG attribute. Today, by employing IE 5.0 DHTML behaviors we could make it even more elegant (Look for a future article on this - Ed) but a helper ASP page to retrieve and send the stream of bytes will be always needed.
The sample code includes 4 ASP files to demonstrate the solutions discussed above. The two files that demonstrate images from a database (HTMLPictDB and DHTMLPictDB) assume that you have SQL Server 6.5 or SQL Server 7.0 installed. You could change the code to address different databases but make sure the blob object you send to Response is always a regular GIF file. Consider that, for example, the blob fields in the Northwind database aren't GIF files. They actually are OLE objects embedding a bitmap file. The other two ASP files, HTMLPictures.asp and DHTMLPictures.asp , are self-calling forms that require the full name of the picture file to be entered before a picture is displayed.
Further Reading
Getting images from a database is a topic covered also in the following two articles:
Serving Images From SQL Server to a Web Browser, Jia Wang, Active Server Developer's Journal, November 98
Delivering Web Images From SQL Server, Scott Stansfield, MIND, July 98
The former uses a COM object to retrieve the bytes of the image from a database and store it to a temporary file. Then an ASP page links such a file to the proper IMG tag. It uses VB5, ADO 1.5 and SQL Server 6.5.
The latter, instead, displays DB images in the same way I've shown above, but provides a complete application that writes and reads images from a SQL Server table. For such task, it employs an ATL COM object
a01,:a02)');