I've googled and tried various approaches, but could not resolve this
problem.  The article at MSDN: Displaying Images in a GridView Column
only presents a simple case where all data (including the images) of
the gridview come from a single table/datasource.

Here is my situation. In my web application, I need to display
customer bills info in a gridview.

Customer names and contact info are from the Customer table.

If a customer's bill is past due, I display a red circle in the last
coumn of that row.
If a customer's bill has been paid, I display a green circle in the
last column of that row.
If a customer's bill isn't past due, I display a blue circle in the
last column of that row.

Simple, right?

These little colorful circles can be from a database table or from an
ArrayList.

I've tried a template field in the last column and then bind the
ImageUrl of the Image Control to a method I have in the code-behind,
like so:

<asp:Image ... ImageUrl='<%# GetIconPath() %>' ....></asp:Image>

It did not work.

I removed the Image control and simply tried:

<img src='GetIconPath()' />

And it still did not work.

Then, I tried using a Label control and in the code behind I say

lblImageURL.Text = "<img src='" + GetIconPath() + "'/>";

It still didn't work.

Then, I created another page GetIconPath.aspx, which simply outputs
the path of the icon as a string like "~/Images/red_cirlce.jpg", and
in the Image control, I say

<asp:Image .... ImageUrl="GetIconPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField> instead of <asp:TemplateField>, and it still
refuses to work.  I've spent the whole day working on this, and cannot
resolve this problem.

Any hint is highly appreciated.