有没有比重复 ../ 更简单的 HTML 路径方法？答案

【问题标题】：Is there an easier HTML Path method than repeating ../?有没有比重复 ../ 更简单的 HTML 路径方法？
【发布时间】：2015-11-18 10:29:25
【问题描述】：

非常基本的问题，请提供一些建议。我所有的网络图像和 CSS 当然都组织在我的根目录中。然后我有一个目录文件夹，它分为 3-4 个更深的子类别。在我的 HTML 中，我的图像/css 变得有点混乱，因为我使用了很多：

../

<img src="../../../images/myimage.png" style="width:200px; height:auto;">

你们有什么推荐的吗？你这样做吗？或者我应该将与该文件相关的图像分类到它们的子类别中吗？谢谢，一如既往。

C:\Users\sam\Desktop\webroot\catalogue\folder1\folder2\folder3

【问题讨论】：

标签： html css path

【解决方案1】：

您可以为此使用base，请参阅MDN

HTML 元素指定用于文档中包含的所有相对 URL 的基本 URL。一个文档中只能有一个元素。

例如，如果您的文件夹结构类似于 yourdomain/images 集 <base href="yourdomain"/>

【讨论】：

【解决方案2】：

这是正确的做法。除了在相关文件夹中对图像进行排序，您可以像以前一样将其保存在单独的文件夹中。

有一种方法可以最大限度地减少../ 的次数

不要直接在标记的行中分配src。总是喜欢单独的css 文件或javascript 文件来执行此操作。您可以将所有css 文件放在一个文件夹中，并且可以将该文件夹放在更靠近您的images 文件夹的位置。

这样你就只能使用一个../。它看起来像../images/yourimage.png

假设你的 html 文件的位置是 \1\2\3\4\5\6\7\8\sample.html

你的图片文件在\1\images\ 您可以将所有javascript 文件放在更靠近images 文件夹的文件夹中，例如\1\scripts\

现在假设在你的sample.html 文件中有很多像下面这样的图片标签

<img height="200" width="200" class="nature"/>
<img height="200" width="200" class="nature"/>
<img height="200" width="200" class="nature"/>

你可以像这样导入javascript文件

<script src="../../../../../../../../scripts/myscripts.js"></script>

注意：这是你唯一要长时间使用的地方../

在myscripts.js 文件中你可以简单地使用

$(".nature").attr("src","../images/yourimage.png");

同样，您也可以对其余标签执行此操作。所以在那个`javascript中你不需要使用冗长的位置。

您可能有 100 个 img 标记。您只需导入此js 文件一次并使用它。

【讨论】：