如何在 ASP.Net MVC razor helper 中为图像指定虚拟路径

Question

In my razor style helper class (located in the App_Code folder, I've got this line of code:

<img src="../../Content/images/ajax_activity.gif" alt="loading"/>

This works fine in Cassini, but when I deploy the app to IIS (virtual directory), IIS can't find the path. The virtual path is being ignored. This also doesn't work:

<img src="@Href("~/Content/images/ajax_activity.gif")" alt="loading" />

Answer 1

尝试这个：

<img src="@Url.Content("~/Content/images/ajax_activity.gif")" alt="loading" />

Answer 2

OK, solved it, though I'm not really sure why it's working. After trying all the following combinations without success:

<img src="../Content/images/ajax_activity.gif" alt="loading"/>
<img src="/Content/images/ajax_activity.gif" alt="loading"/>
<img src="~/Content/images/ajax_activity.gif" alt="loading"/>
<img src="Content/images/ajax_activity.gif" alt="loading"/>

the following finally worked as expected

<img src="./Content/images/ajax_activity.gif" alt="loading"/>

It returned the image path correctly with the virtual directory set. Anyone able to explain this?

Answer 3

You could use @Url.Content method to convert virtual relative path to absolute application path like this:

<img src=@Url.Content("~/images/picture.png") alt="picture description">

It'll be converted in this HTML code forwarded to client:

<img src="/appname/images/picture.png" alt="picture description">

UPDATE: In other hand you could convert image to base64 and it will be displayed correctly too:

<img src="data:image/png;base64,iVBORw0KG...SuQmCC" alt="picture description">

Answer 4

When you deploy in a virtual directory in IIS, the app root may be different from what you had in your dev environment.

If your app url si something like

http://localhost/MyWebApp/

ASP.NET will consider the root is "localhost", when it should be "MyWebApp".

To solve this, you have to convert the virtual directory to an application : in IIS Manager, find your directory, right clic on it, and then "Convert to application".

Answer 5

I know this is an old post but the information I needed was here.

For me the missing part was "When Published". So for any future developers looking for how to work with web config transformations, the process I follow is:

1. Add a transformation file for each project configuration (ie deployment)

2. Add the environment specific elements (don't forget the xdt attributes)

3. Modify the Web.config for your local development.

When the project is published, the transformation will occur.