MVC4 ActionLink 图片

Question

我正在尝试替换ASP.NET MVC4 Web应用程序中_Layout.cshtml中臭名昭著的“your logo here”。以下代码可以在主页（Home view）上显示图片，但在联系人视图上无法显示图片（操作有效）。我需要在开发环境和生产环境中都能够正常工作。

< p class="site-title">@Html.ActionLink(" ", "Index", "Home", new
  {
  style = "background: url('./Images/login_sm.bmp') no-repeat center right;
          display:block; height:84px; width:264px;"
  })
</ p>

- Gina Marano

---

你的意思是它不起作用，图片没有出现吗？它出现了，但点击没有反应吗？它出现了但是不对齐吗？ - jorgehmv

后续页面上没有图片。点击仍然有效。我猜测它找不到图像。在查看源代码时，HTML 看起来是相同的（正如我所期望的那样）。 - Gina Marano

Answer 1

图片的路径始终相对于当前 CSS 文件的位置。

如果您正在使用内联 CSS，则应使用 URL 助手：

@Html.ActionLink(
    " ", 
    "Index", 
    "Home", 
    null , 
    new { 
        style = "background: url('" + Url.Content("~/images/login_sm.bmp") + "') no-repeat center right; display:block; height:84px; width:264px;" 
    }
)

或者如果您决定定义一个CSS类：

@Html.ActionLink(
    " ", 
    "Index", 
    "Home",  
    null , 
    new { 
        @class = "mylink" 
    }
)

假设您在~/content/Site.css文件中定义了.mylink选择器：

.mylink {
    background: url('../images/login_sm.bmp') no-repeat center right; 
    display: block; 
    height: 84px; 
    width: 264px;
}

- Darin Dimitrov

---

谢谢！我使用了第一种方法。我知道我做了些愚蠢的事情。我尝试了不同的URL.Content方式，但显然不是正确的方式。 - Gina Marano

将一个空字符串作为linkText传递，这是一种好的做法吗？这不被认为是一种hack吗？ - CloneXpert

Answer 2

你可以按照以下最佳方式进行

@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" ... />"))

运行完美

- Dilip Langhanoja

---

可以移除，但是很遗憾图片会被突出显示。如何进行移除？ - user2609980

@user2609980 我没有这样的问题。可能是你的 CSS 问题，请检查一下。 - Dilip Langhanoja

谢谢您的回复。确实是CSS的问题。由于它是一个普通链接，而且所有的链接都被突出显示，这也出现在了标志图像周围。我把它移除了，现在看起来很好。感谢您的解决方案。 - user2609980

太好了；然而，由于该字符 '\ '，样式化图像有点棘手。但是我想出来了：<img class="logo" - usefulBee

@usefulBee 感谢您的关注。您说得对，但一旦开始使用，一切都会好起来的。我会根据您的建议进行更新。 - Dilip Langhanoja

Answer 3

您可以使用这个。

<a href='@Url.Action("action", "Controller")'>
<img src='@Url.Content("~/images/imageName.png")' /></a>

这个功能正常工作，它的工作方式类似于@Html.ActionLink("linkName","action","Controller")

- Amit Ghute

Answer 4

我稍微编辑了Dilip0165的解决方案。

@Html.Raw(@Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"" + @Url.Content("~/Content/assets/img/logo.png") + "\" alt=\"Link description\" title=\"Link description\" />"))

如果您想去掉默认边框，可以将以下代码添加到您的CSS中。

img {border: 0px;}

- Muflix

Answer 5

我发现当需要高度自定义标签（例如在锚点内使用其他标签）时，最好自己动手实现。

我曾经使用UrlHelper.GenerateUrl方法生成URL，然后手动创建标签并使用生成的URL。

- Illidan