Working with images in asp.net MVC ViewMasterPage in design mode

Question

While designing a master page i am adding a number of images to it.

I have an image tag inside the master page,

<img src="../../Content/Images/img19.jpg" class="profileImage" />

When i run my app, the image doesn't show up in the browser because the src path in the page that browser gets is same as in the master page.

ie. "../../Content/Images/img19.jpg"

But it should have been "Content/Images/img19.jpg"

If i correct the src path in master page as

<img src="Content/Images/img19.jpg" class="profileImage" />

Then I can see the image in the browser but not in design mode.

Any help is appreciated.

Answer 1

Use Asp Images

<asp:Image ID="Image1" runat="server" ImageUrl="~/Content/Pictures/xxx.png" />

You will see images in design mode and when you publish Pages too.

Answer 2

It should work fine if you use a leading slash:

<img src="/Content/Images/img19.jpg" class="profileImage" />

For other situations, you can convert a virtual (relative) path to an application absolute path using Url.Convert, such as

Url.Content("~/Content/Images/img19.jpg");