Image is not being displayed once added runat="server"

Question

I have and <img/> tag in my asp.net project. I want to add runat="server" to it.

However once I add it the image is not being displayed anymore and rather I get a string like this display in the browser:

 " id="GridView1_smallImage1_1" style="max-width: 95%; max-height: 95%; margin:0 auto;" alt="image" />

He is the image itself:

<img id="smallImage1" style="max-width: 95%; max-height: 95%; margin:0 auto;" src='data:image/jpg;base64,<%# Eval("Image2") != System.DBNull.Value ? Convert.ToBase64String((byte[])Eval("Image2")) : string.Empty%>' alt="image"/>

Could someone explain why this is happening and what would be the approach of changing the src in the code behind?

Answer 1

Try using a native asp image control and then either

Set with predefined image location:

<asp:Image id="smallImage1" runat=server" ImageUrl='<%# string.Format("~/imageLocation/{0}", Eval("Image2") != System.DBNull.Value ? Convert.ToBase64String((byte[])Eval("Image2")) : string.Empty%>' alt="image"/>

or set the source in the code behind if extracting from external source:

smallImage1.Src = "data:image/png;base64," + Convert.ToBase64String(....);

Hope this helps.