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（省略http由于堆栈溢出要求，URL的localhost部分）。如果你在这种情况下查看图像的属性，图像的URL是：/Images/digital_blue_std.jpg这就是我想要的。但是，当使用该页面中的actionlink到同一区域中的另一个页面时，同一图像的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")" >

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

请记住，当您执行类似＆＃34; ../../ blah＆＃34;它从URL路径获取相对路径，而不是页面操作路径。这是因为浏览器正在加载图像，而不是服务器，并且浏览器除了当前路径之外什么都不知道。

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

1 个答案: