ASP.NET MVC ActionLink与RedirectToAction用于区域中的图像

Question

我的图片有一个问题，很难解释，因此希望这是有道理的。 我正在使用ASP.NET MVC 4 Razor。 我有一个区域设置，并且正在使用根目录中的布局页面。 除了一个小问题，一切工作正常。 当我在某个区域中使用ActionLink时，除了页面上的图像之外，包括布局页面在内的页面都可以很好地呈现。 如果我在控制器中使用RedirectToAction，则包括图像在内的所有内容都可以正常渲染。 我可以看到图像的位置呈现了不同的效果，但是我不确定为什么或如何修复它。

这是我的布局页面，位于根目录中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewData("Title") - eLAD</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
       <div id="container">
         <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><img src="../../Images/digital_blue_std.jpg" alt="" height="50px" style="vertical-align:middle" /> @Html.ActionLink("company name", "Index", "Home")</p>
                 </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home", New With {.area = ""}, Nothing)</li>
                            <li>@Html.ActionLink("About", "About", "Home", New With {.area = ""}, Nothing)</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home", New With {.area = ""}, Nothing)</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required:=false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
         </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year</p>
                </div>
            </div>
        </footer>
       </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required:=False)

     </body>
</html>

我有一个名为OwnedQuote的区域，我的大多数视图和控制器都在其中。因此，假设我有这个URL / OwnedQuote / AircraftRegNumber / Create，我必须在控制器中使用RedirectToAction（由于以下原因，省略了URL的http localhost部分：堆栈溢出要求）。 如果在这种情况下查看图像的属性，则图像的URL为：/Images/digital_blue_std.jpg这就是我想要的。 但是，当使用从该页面到同一区域中另一页面的操作链接时，同一图像的URL为：/OwnedQuote/Images/digital_blue_std.jpg。 请注意，现在添加了区域，这是一个问题，因为该位置不存在图像。 我的动作链接命令是：

@Html.ActionLink("Referral to UW", "ReferToUW", "Referral", New With {.id = Model.Aircraft.ID}, Nothing)

布局页面和正文部分中的所有其他内容都是正确的。 所以我不确定为什么使用Html.ActionLink与RedirectToAction时图像URL会有所不同。 我需要它的行为与RedirectToAction相同。

Answer 1

首先，不要在应用程序中使用类似的路径。 您想使用一个已知的参考点。 由于您使用的是使用Razor 2的MVC 4，因此razor可以自然地理解您的站点根目录。 因此，您只需要执行以下操作：

<img src="~/Images/myImage.jpg">

〜是您网站的根目录。 在MVC3中，您必须像这样使用Html.Content：

<img src="@Html.Content("~/Images/myImage.jpg")" >

问题的原因是，您最终到达了不同的URL，并且由于MVC路由默认操作的处理，您可以从两个不同的URL路径查看同一操作。 问题是两个路径的图像不存在相同的偏移量，因此您遇到了问题。 使用站点相对路径可以解决此问题。

请记住，当您执行“ ../../blah”之类的操作时，它会从URL路径获取相对路径，而不是页面操作路径。 这是因为浏览器正在加载图像，而不是服务器，并且浏览器除了当前路径外，不知道其他任何信息。