How to change an image's ImageUrl attribute on page load with asp.net and C# in IE

Question

I have links on a homepage that may or may not have attachments associated with them. If the links have attachments, then an icon will be placed next to the link. The icon will only be there if the link has an attachment.

protected void Page_Load(object sender, EventArgs e)
    {
        foreach (Image pic in imgAttachment)
            {
                 int type = ds.Current_Events[index].AttachmentID;
                 //ds is the dataset

The foreach loop is going through each of the "Current Event" pictures on the homepage then getting the type of attachment associated with each link aka the AtachmentID. The AttachmentID can be a 0, 1, 2, or 3 which means no attachment, photo attached, video attached, or document attached repectively.

A switch statement is then used to change the ImageUrl attribute to the corresponding picture.

                 switch (type)
                     {
                            case 0:
                                break;
                            case 1:
                                pic.ImageUrl = "images/eventicons/Photo.jpg";
                                //changed from just "Photo.jpg"
                                break;
                            case 2:
                                pic.ImageUrl = "images/eventicons/Video.jpg";
                                //changed from just "Video.jpg"
                                break;
                            case 3:
                                pic.ImageUrl = "images/eventicons/Doc.jpg";
                                //changed from just "Doc.jpg"
                                break;
                            default:
                                pic.Visible = false;
                                break;
                      }
                  index++;
            }
    }

The image does not load in IE, however it does work for firefox.

The following is the aspx front

<div>
  <ul>
   <li>
      <asp:HyperLink ID="lblEvent1" runat="server">              
           <img src="images/bar_blank.gif" />
      </asp:HyperLink>
      <asp:Image ID="Image1" runat="server" />
   </li>
   <li>
      <asp:HyperLink ID="lblEvent2" runat="server">
           <img src="images/bar_blank.gif" />
      </asp:HyperLink>
      <asp:Image ID="Image2" runat="server" />
   </li>
  </ul>
</div>

Answer 1

You should add the full path to your images. Instead of

pic.ImageUrl = "Photo.jpg";

you could do this to have ASP.Net write out the path of the photo as well...

pic.ImageUrl = "~/MyImagePath/Photo.jpg";

Answer 2

I figured out the problem.

The pictures that I was using were almost 500kb. I assumed the disk space size of the pictures were small because the images themselves were small but this was not true. I resized the images and got them down to around 40kb. The images now load in ie.

So, there seems to be a problem in ie if you change the ImageUrl of an image control in asp.net during page load and the image file you are pointing to is large (500kb).

The solution is to make the picture itself take up less disk space by resizing it, making it a gif, ect..

Answer 3

What does the html code look like that is being produced from your code? Could you post this as there are know issues with the way IE and firefox renders images based on how you reference your image. Would be good to see the rendering as well as your code behind.