HTML img and ASP.NET Image and relative paths

Question

What is the correct way to reference an image in ASP.NET for live deployment on IIS?

The following works in dev and production:

<asp:ImageButton ID="ibnEdit" runat="server" OnClick="ibnEdit_Click" ImageUrl="~/App_Themes/Default/images/one.png" Visible="false" ToolTip="Edit" />

The following doesn't work in either: (why not?)

<img src="~/App_Themes/Default/images/two.gif" />

The following works in dev but not in production:

<img src="../App_Themes/Default/images/two.gif" />

Mcglone

Are you sure you images are deployed in production? – Pinfish

@are the images in the same path as dev environment.?? – Yellowstone

Answer 1

If you want to use a regular img tag with the ~ path, you can just add runat="server" into the tag as an attribute (like regular server controls) and the path will be resolved. e.g:

<img src="~/App_Themes/Default/images/two.gif" runat="server" /> 

For your second part, is the ../ image reference appearing on more than one page, for example a user control or master page (etc) such that you might be using it at different folder levels...

Bedlamite

Nice, does it have any effect on overall performance of website? – Henriettehenriha

@Henriettehenriha it should essentially have no effect. The control would go through the control life cycle. That being said, you would probably need to add a LOT of images to see any difference. – Bedlamite

Answer 2

I use this syntax for access images from master pages

<img src="<%=ResolveUrl("~/Content/Images/error_img.jp")%>" width="350" style="padding-right: 15px; padding-top: 20px;"/>

Fantasm

Answer 3

The ~ will only work on a server control such as <asp:Image> or <asp:ImageButton>. This tells ASP.Net to insert the application path. Sometime that's just "/" but if your application is not the root directory of the website it will include the path it is in. The img tag is just html and it will not be altered by ASP.Net, so the browser gets the path "~/App_Themes/Default/images/two.gif" and doesn't know how to read it.

I don't know why the last example works in dev but not in production. It might has something to do with having the application in the root directory in dev but in a sub directory in production.

Forgive

+1, also, @mmmbop, to resolve ~/ in a HTML tag you can use the UrlHelper class (instead of switching to using asp:image controls) <img src="<%= Url.Content("~/App_Themes/Default/images/two.gif") %>" /> – Venepuncture

Answer 4

This worked for me

$(".selector").attr('src', "Content/themes/base/images/img.png");

The important is that you do not have "/" at the beginning of your new src.

Lectureship

Answer 5

byte[] imageArray = System.IO.File.ReadAllBytes(Server.MapPath("~/Images/Upload_Image.png"));

string base64ImageRepresentation = Convert.ToBase64String(imageArray);

Catenate

Answer 6

You can look into my answer . I have resolved the issue using C# language. Why can't I do <img src="C:/localfile.jpg">?

Interlinear