如何正确引用HTML中的本地资源？ [英] How to properly reference local resources in HTML?

问题描述

事实证明，引用本地资源对某些人来说可能是一个难题。我正在寻找对本地资源引用的规范答案，以及它们的含义。

以这些示例为例，这些参考路径有什么区别？

• < img src =myfile.png/> （无斜杠）


• < img src =/ myfile.png/> （带斜杠）
  
• < img src =folder / myfile.png/> （无前导斜杠/在子文件夹中） < img src =/ folder / myfile.png/> （带前导斜杠/在子文件夹中）


• < img src =../ folder / myfile.png/> （带点和斜杠/在子文件夹中）

解决方案

• 前导斜杠告诉浏览器从根目录开始。 b $ b
• 如果您没有前导斜杠，则从当前目录引用。


• 如果您在前导斜杠前添加两个点，则表示您正在引用当前目录的父项。

以下面的文件夹结构

notice：

• ROOT复选标记为绿色，第二个复选标记为橙色，第三个复选标记为紫色， / li>
  
• 第四个复选标记为黄色

现在位于 index.html .en 文件，您需要添加以下标记：

 < p> 
< span> src =check_mark.png< / span> 
< img src =check_mark.png/> 
< span>我是紫色的，因为我是从当前目录中引用< / span> 
< / p> 
 
< p> 
< span> src =/ check_mark.png< / span> 
< img src =/ check_mark.png/> 
< span>我是绿色的，因为我是从ROOT目录中引用< / span> 
< / p> 
 
< p> 
< span> src =子文件夹/ check_mark.png< / span> 
< img src =subfolder / check_mark.png/> 
< span>我是黄色的，因为我是从当前目录的子项引用< / span> 
< / p> 
 
< p> 
< span> src =/ subfolder / check_mark.png< / span> 
< img src =/ subfolder / check_mark.png/> 
< span>我是橙色的，因为我是从ROOT目录的子项引用< / span> 
< / p> 
 
< p> 
< span> src =../子文件夹/ check_mark.png< / span> 
< img src =../ subfolder / check_mark.png/> 
< span>我是紫色的，因为我是从当前目录的父级引用< / span> 
< / p> 
 
< p> 
< span> src =子文件夹/子文件夹/ check_mark.png< / span> 
< img src =subfolder / subfolder / check_mark.png/> 
< span>我被[断]，因为从当前目录< / span> 
< / p> 
 
< p> 
< span> src =/ subfolder / subfolder / check_mark.png< / span> 
< img src =/ subfolder / subfolder / check_mark.png/> 
< span>我是紫色的，因为我从ROOT目录< / span>中引用了两个孩子。 
< / p> 
  

现在，如果您加载 index.html.en 文件

http://example.com/subfolder/subfolder/

这将是您的输出

As it turns out, referencing local resources can be a rub point for some. I'm looking for a canonical answer to local resource referencing, and what they mean.

Take these examples, what is the difference between these reference paths?

• <img src="myfile.png" /> (no leading slash)
• <img src="/myfile.png" /> (with leading slash)
• <img src="folder/myfile.png" /> (no leading slash / in subfolder)
• <img src="/folder/myfile.png" /> (with leading slash / in sub folder)
• <img src="../folder/myfile.png" /> (with dots and a leading slash / in sub folder)

解决方案

• A leading slash tells the browser to start at the root directory.
• If you don't have the leading slash, you're referencing from the current directory.
• If you add two dots before the leading slash, it means you're referencing the parent of the current directory.

Take the following folder structure

notice:

• the ROOT checkmark is green,
• the second checkmark is orange,
• the third checkmark is purple,
• the forth checkmark is yellow

Now in the index.html.en file you'll want to put the following markup

<p>
    <span>src="check_mark.png"</span>
    <img src="check_mark.png" />
    <span>I'm purple because I'm referenced from this current directory</span>
</p>

<p>
    <span>src="/check_mark.png"</span>
    <img src="/check_mark.png" />
    <span>I'm green because I'm referenced from the ROOT directory</span>
</p>

<p>
    <span>src="subfolder/check_mark.png"</span>
    <img src="subfolder/check_mark.png" />
    <span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>

<p>
    <span>src="/subfolder/check_mark.png"</span>
    <img src="/subfolder/check_mark.png" />
    <span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>

<p>
    <span>src="../subfolder/check_mark.png"</span>
    <img src="../subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>

<p>
    <span>src="subfolder/subfolder/check_mark.png"</span>
    <img src="subfolder/subfolder/check_mark.png" />
    <span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
    <span>src="/subfolder/subfolder/check_mark.png"</span>
    <img src="/subfolder/subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>

Now if you load up the index.html.en file located in the second subfolder
http://example.com/subfolder/subfolder/

This will be your output

这篇关于如何正确引用HTML中的本地资源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！