html中怎么加img路径

html中怎么加img路径

HTML中加入图片可以通过标签实现，在标签中要加入图片的路径，本文将针对如何在HTML中加入图片路径进行详细讲解。

使用绝对路径

一个图片的绝对路径指向的是网络上的一个资源位置，可以通过一些专业网站（如imgur、腾讯云存储等）来上传图片，取得图片的绝对路径。那么，使用绝对路径的方式来加入图片是最稳妥的方法之一。

在HTML代码中，可以使用以下代码来引用网上的图片：

<img src="https://xxxx.com/xxx.jpg" alt="图片占位符">

在这里，src属性指定了图片的URL地址，alt属性则是在图片下载不成功或者禁用了图片显示时显示的替代文本。

使用这种方式需要注意的是，插入的图片地址必须是公网可访问的网络资源，而不能是本机磁盘中的文件。

使用相对路径

我们可以使用相对路径来引用站内的图片。相对路径必须相对于包含当前页面的HTML代码的URL地址。

比如，如果在站点根目录下有一张图片，那么可以用下面的代码引用：

<img src="/images/xxx.jpg" alt="图片占位符">

在这里，相对路径指向的是站点的根目录，因为前面有一个斜杠（/）。如果想给img标签定义一个文件夹作为上下文，请使用所引用图片文件夹的相关路径。

比如，如果图片在一个叫做“images”的文件夹下：

<img src="images/xxx.jpg" alt="图片占位符">

在这里，相对操作指定了该文件与包含它的HTML页面处于同一级别的images文件夹中。

使用相对路径时需要注意的是，这些路径都相对于包含它们的HTML的文件，在编写文档时不应不考虑他们相对的位置引用的正确性。

使用基于根目录的路径

另一种方法是使用基于根目录的路径，它以斜杠“/”作为引导。相对于当前文件的路径不需要考虑，直接指定图片在站点的根目录中的位置。

例如，考虑站点URL为http://example.com，在这个站点根目录的位置有一张图片：

<img src="/images/xxx.jpg" alt="图片占位符">

这里和相对路径一样使用了/images/xxx.jpg，但为了明确图片位置是站点根目录下，斜杆字符开始的绝对路径被使用。

使用data URI

data URI方案，是一种可以在HTML内部直接使用资源而无需引用外部文件的方法。该方法基于Base64编码，通过将完整的URL（或文件）数据以字符串形式嵌入到HTML代码中实现。

<img src="data:image/png;base64,iVBORw0KGgoAAAA..." alt="图片占位符">

请注意这种方式可能会导致HTML文件更大并降低加载速度。这种方式的应用可以避免向外部文件夹转移图像文件，并可以加快页面加载速度。毕竟，除非服务器已经与现有的资源数据库（如imgur或腾讯云实例）完全集成，否则所有向外部某种资源（包括图像）的请求都可能具有时间先后之分，并因此降低性能。

总结

以上就是在HTML中加入图片路径的方式，不管是何种方法，都需要在考虑性能与文件存储的同时，充分了解该文件的位置与指向。强烈建议在熟练掌握所有方式之后，采取每种方式的最佳实践，并选择对于特定站点和性能要求最佳的方式。