html - 图像未出现在页眉 block 中

Question

这是我第一次尝试使用 Bootstrap 3 为我的保龄球俱乐部开发一个更新的网站。我有以下 HTML 定义我的标题。

<div class="container">
    <div class="header row">
        <div class="col-md-2">
            <img src="~\Content\Graphics\ClubBadge_DarkBlue.png" class="img-responsive" />
        </div>
        <div class="col-sm-8 col-md-8">
            <nav class="collapse navbar-collapse pull-right">
                <ul class="nav navbar-nav">
                    <li role="presentation">@Html.ActionLink("About Us", "About", "Home")</li>
                    <li role="presentation">@Html.ActionLink("Contact Us", "Contact", "Home")</li>
                    <li role="presentation">@Html.ActionLink("Privacy Policy", "Privacy", "Home")</li>
                    <li role="presentation">@Html.ActionLink("Useful Links", "Links", "Home")</li>
                </ul>
            </nav>
        </div>
        <div class="col-sm-2 col-md-2" style="background-color:#cccccc">
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

导航栏右对齐出现在中间 8 列中，登录面板出现在右侧 2 列中，但图像未出现在左侧 2 列中。我得到的只是一个带有对 Angular 线的小圆圈 - 我假设是一个占位符。如果我将光标悬停在 src= 上，我会看到我想要显示的图像，因此目录引用是正确的。

为了显示图像我忘了做什么？

Answer 1

我不确定“~\Content\Graphics\ClubBadge_DarkBlue.png”是否是有效路径，但我可能是错的。首先，尝试使用其他分隔符:

~/Content/Graphics/ClubBadge_DarkBlue.png

其次，您确定路径中的“~”是正确的吗？可以尝试的另一件事是将其删除。

而且，如果没有任何效果，请检查开发人员控制台(chrome EG 中的 f12)并检查您的网络选项卡，以查看引发该资源请求的错误。