Thread: V9 Master Pages / Images

If I had an image like this

Code:

<img src="skins/skin_2/images/logo.gif" width="333" height="95" alt="My Image" title="My Image" />

What would the equivalent be in master pages?

I guess the simple answer is

Code:

<img src="App_Themes/Skin_2/images/logo.gif" width="333" height="95" alt="My Image" title="My Image" />

Is there some other way other than hard coding the path? Like some way that it will know which skin id im using and look it up?

If you have images inside the .aspx form, make sure you are using the relative path and it should always have an runat="server" property so it is parsed correctly. In your case, you should do it like this:

Code:

<img runat="server" src="App_Themes/Skin_2/images/logo.gif" width="333" height="95" alt="My Image" title="My Image" />

or better yet, use the <asp:Image> element:

Code:

<asp:Image runat="server" ImageUrl="~/App_Themes/Skin_2/images/logo.gif" />

Or, even better, use this

No need to specify the full App_Themes/Skin folder.

<asp:Image ID="logo" runat="server" ImageUrl="<%$ Tokens:SKINIMAGE, logo.gif %>" />

Thanks Matt, that was exactly what I was looking for!

Which brings up a good "Best Practice". If you are accessing files in your skin OUTSIDE of the App_Themes directory, then always do path from application root. For example,

Code:

<img src="./images/myimage.gif" />

will work ok, however if you ever turn on some of the other routing engine rules this will start breaking all over the place. The alternative is:

Code:

<img runat="server" id="imgMyImage" src="~/images/myimage.gif" />

This causes .NET to parse the image path from whereever the root of your application is so no matter how many directories you are deep, the right path is always set. If your are in mystore.com/stuff/someotherstuff/page.aspx, that code would return "../../images/myimage.gif"