Use of ResolveClientUrl() method in getting browser-acceptable relative URL

In .NET, we always use tilde (~) to refer to root virtual directory of the web application. For instance,

<asp:Image runat="server" ImageUrl="~/images/mypic.gif" />

However, in order to generate a URL that can be used by client-side browser, the URL is actually resolved in the AddAttributesToRender() of the Image server control.

writer.AddAttribute(HtmlTextWriterAttribute.Src, ResolveUrl(ImageUrl));

That is the reason why you can use "~" in the ImageUrl property. But I afraid this might be the case if you do the same thing upon the normal HTML elements or HtmlGenericControl, such as :

<img src="~/images/mypic.gif" alt="" />

because the browser does not recognise what the "~" symbol stands for. In order to workaround with that, this is where the ResolveClientUrl() method comes into place.

<img src='<%= ResolveClientUrl("~/images/mypic.gif") %>' />

Apart from using it in HTML, it can also be used in code-behind that involves in getting the relative path for the URL. For instance, ResolveClientUrl() method is handy when we are trying to register the javascript reference in code-behind,

this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(),"MyScript", this.ResolveClientUrl("~/images/myscript.js"));

Not only that, you will always need this method in your custom server control development.