如何在 ASP.NET MVC 5 RAZOR 中将图像添加到导航栏品牌答案

【问题标题】：How to add image to navbar-brand in ASP.NET MVC 5 RAZOR如何在 ASP.NET MVC 5 RAZOR 中将图像添加到导航栏品牌
【发布时间】：2014-07-28 03:27:58
【问题描述】：

这些天我正在尝试 asp.net mvc，但停留在开始阶段。我想用标题和 alt 标签放置图像代替应用程序名称。请帮帮我。

谢谢

<div class="navbar-header pull-left">
    <a class="navbar-brand" href="index.html"><img src="img/accomodator-mini.png" title="title" alt="additional title" /></a>
</div>

上面这样怎么做：

 @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })

我很困惑如何在应用程序名称的位置显示图像

【问题讨论】：

它不工作？
@TheBokiya 。你好，你是什么意思？我不明白你的意思.. Razor 语法就像 Html.ActionLink
不，那只是 C#。这是 Razor 语法 w3schools.com/aspnet/razor_syntax.asp
@TheBokiya。是的，我知道 razor 以电子邮件符号开头，但在评论中它是不允许的。感谢您的链接
我仍然不太确定您在寻找什么，但请在下面查看我的答案

标签： css html twitter-bootstrap razor asp.net-mvc-5

【解决方案1】：

1 个选项： 你可以在 css 中做任何事情：

.navbar-brand{
    background: url(http://placehold.it/350x150) no-repeat;
    background-size: 40px 40px;
    height:40px;
    margin:5px;
    width:40px;
}

JsFiddle example - 在本示例中，图片为 350x150 像素。并且使用background-size 属性可以调整图像大小。

2个选项：

<a href="@Url.Action("Index", "Home")" class="navbar-brand">
    <img src="img/accomodator-mini.png" title="title" alt="additional title" />
</a>

3 个选项： Define your own helper.

【讨论】：

您缺少@Url 上的.Action。

【解决方案2】：

很简单。在 MVC-5 中，这是可行的。

<a href="@Url.Action("Index", "Home")" class="navbar-brand">
  <img src="~/Images/logo.png" title="title" alt="additional title" />
</a>

并确保您的徽标放置在正确的文件夹中。

【讨论】：

【解决方案3】：

你可以这样做：

@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })

然后在css中，有这个：

.navbar-brand {
    background-image: url(img/accomodator-mini.png);
}

【讨论】：

这行得通，但仍然呈现字符串“应用程序名称”。
ActionLink 的第一个参数只是要显示的链接文本。它应该相当简单。您可能需要检查您的类名和图像路径。

【解决方案4】：

打开您的 MVC 应用程序文件夹，在所有其他文件夹（模型、视图、控制器...）旁边创建一个名为“images”的文件夹，将您的 logo.jpg 放入文件夹 images。然后在您的 Visual Studio 编辑器中打开 View/Home/index.cshtml 并将下面一行 html 代码放在顶部 <div> 中：

<div class="jumbotron">
    <img src="images/logo.jpg" alt="Games Logo" ALIGN="right" />
    <h1>Computer Games Library</h1>
    <p class="lead">Programmer: Marzieh Farahani</p>
</div>

【讨论】：

【解决方案5】：

Robin 请求帮助替换文本“我想用标题和 alt 标签放置图像代替应用程序名称”。带有图片。

【讨论】：