Html 领先的/&引用；断开标头中的文件链接

我正在尝试更新一个使用Jekyll构建的网站，但是我遇到了一个HTML链接不起作用的问题。以下是header.html文件的头的开头：

<div id="primary-header" class="{{include.class_name}}">
<div class="container">
<div class="row">
  <div class="logo-wrap">
    <a href="/">
      <img src="/img/logos/header-logo.png" alt="Logo">
    </a>
  </div>

---

该项目位于/Volumes/Holder/Work/Projects/c4中 header-logo.png位于/Volumes/Holder/Work/Projects/c4/img/logos/header-logo.png中 我正在浏览器中加载的文件是/Volumes/Holder/Work/Projects/c4/index.html

由于某些原因，当我在我的计算机（OSX 10.9.4）上显示此文件时，它将无法识别“/img”指示的文件。如果我删除“/”，它会发现文件没有问题，但这不是一个有效的解决方案，因为在几个文件中有大约一百个前导“/”

---

我知道，如果我删除“/”将找到正确的文件并正确显示，但如何让它在不删除前导“/”的情况下找到指定的文件

您有两个不同的选项，包括使用img路径前面的

~

，因此它看起来像：

 <img src="~/img/logos/header-logo.png" alt="Logo">

可通过以下方式引用：

~/img/logos/header-logo.png

这会帮你找到的

---

您还可以研究转义字符，这对您将来可能有帮助，也可能没有帮助

编辑

---

有关何时使用波浪斜杠（而非斜杠）的说明，请参阅：

将您的

img

文件夹放在根路径上

，这就是baseurl的用途

在_config.yml中：

baseurl: '/Volumes/Holder/Work/Projects/c4'

现在，当您调用一个资产（css、jss或图像）时，只需在它的基础url前面加上前缀

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" >

<script src="{{ site.baseurl }}/assets/javascripts/scripts.js"></script>

<img src="{{ site.baseurl }}/img/logos/header-logo.png">

将您的域更改为指向img文件夹所在的目录：Dtry，在每个域前面使用转义字符/-它应该看起来像//img//logo等。因此，使它们加倍//应该可以工作。另外，您最好在路径开头的imgA正斜杠前面添加“~”表示它来自根文件夹，这就是我的意图吗？项目位于/Volumes/Holder/Work/Projects/c4中header-logo.png位于/Volumes/Holder/Work/Projects/c4/img/logos/我在浏览器中加载的文件是/Volumes/Holder/Work/Projects/c4/index.html，这不意味着img文件夹位于根目录中吗？项目位于/Volumes/Holder/Work/Projects/c4中header-logo.png位于/Volumes/Holder/Work/Projects/c4/img/logos/我在浏览器中加载的文件是/Volumes/Holder/Work/Projects/c4/index.html，这是否意味着img文件夹位于根目录中？好的，看起来您的img文件夹位于正确的位置，并且您正在使用文件协议加载index.html。您必须使用带有/Volumes/Holder/Work/Projects/c4/作为根路径的服务器（apache、nginx..）加载index.html。我认为最好删除“/”以使路径相对。无论网站的路径如何，它都能正常工作。Yogesh，我安装了MAMP Pro并正确设置了主机。该站点现在可以正常运行，而无需更改前导“/”。非常感谢。虽然这可能是真的，但我通常使用相对路径，因此我可以直接从硬盘测试文件，而无需使用服务器，并且可以不经修改地将文件ftp到服务器（在我的例子中，不是GitHub）。但是如果index.html中的相对路径/img/image.jpg运行良好，它将在folder/page.html中中断，这就是baseurl有帮助的原因。它允许您标准化对资产的访问，即使您的站点不是托管在域的根目录下。我没有以

/

开头的相对路径。我的是相对于html文件所在的目录的。所以我也有路径，比如

。/images/photo.jpg

，它可以工作。波浪线应该是一个无保留字符，这意味着没有特殊用途（）。这适用于某些Microsoft服务器或带有mod_userdir的Apache。但这不是在web服务器上解析路径的标准方法。这绝对是一个糟糕的建议。看看我在编辑中发布的链接，对大多数人来说，这似乎是非常标准的做法。然而，我不是一个专业人士，是的，当然会有不同的解决方案（我相信可以详细讨论），但据我所知，这是我所学到的解决方案。你编辑中的链接指的是ASP和IIS技术，它们与标准相去甚远。而且这个tilde对常规Apache或Nginx服务器上的url解析没有影响。

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" >

<script src="{{ site.baseurl }}/assets/javascripts/scripts.js"></script>

<img src="{{ site.baseurl }}/img/logos/header-logo.png">