HTML中如何正确引入图片资源

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《如何在HTML中引入图片资源》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

可通过相对路径、绝对路径或网络URL引用外部图片：一、同级目录用"logo.png"；二、子目录用"images/logo.png"；三、父目录用"../logo.png"；四、本地硬盘用"file:///D:/path"（受限）；五、远程图片用"https://example.com/img.png"。

如果您希望在网页中显示图片，但图片文件存放在当前HTML文件所在目录之外的位置，则需要使用正确的路径语法来引用外部图片资源。以下是实现此目标的多种方法：

一、使用相对路径引入同级目录下的图片

当外部图片与HTML文件位于同一级目录时，可直接通过文件名或加上 ./ 前缀进行引用，浏览器会从当前HTML所在目录开始查找。

1、确认图片文件（例如 logo.png）与 index.html 处于同一文件夹内。

2、在HTML中插入 或 。

3、保存HTML文件并用浏览器打开，图片应正常显示。

二、使用相对路径引入子目录中的图片

当图片存放在HTML文件所在目录的子文件夹中时，需在路径中明确写出子目录名称，浏览器将据此逐层进入子目录定位资源。

1、确认图片位于 images/logo.png 路径下，其中 images 是 index.html 所在目录的子文件夹。

2、在HTML中插入 。

3、确保子目录名称拼写准确，区分大小写，避免因路径错误导致图片不显示。

三、使用相对路径引入父目录中的图片

当图片存放在HTML文件所在目录的上一级目录中时，需使用 .. 表示返回上级目录，再指定图片位置，浏览器将向上回溯后查找目标文件。

1、确认HTML文件位于 /project/page/index.html，而图片位于 /project/logo.png。

2、在HTML中插入 。

3、若存在多级嵌套，可叠加使用 ../，例如 ../../assets/icon.jpg 表示上两级后再进入 assets 文件夹。

四、使用绝对路径引入本地硬盘中的图片

当图片位于本地计算机固定路径（如 D:\photos\banner.jpg），可通过 file:// 协议强制指向该位置，但该方式仅限本地测试且存在浏览器安全限制。

1、复制图片完整路径，例如 D:\myweb\images\photo.jpg。

2、将其转换为URL格式：将反斜杠 \ 替换为正斜杠 /，并在开头添加 file:///，得到 file:///D:/myweb/images/photo.jpg。

3、在HTML中插入 。

4、注意：现代浏览器可能阻止 file:// 协议加载资源，需配合本地服务器运行或启用特定启动参数才可能生效。

五、使用网络URL引入远程托管图片

当图片已上传至公开可访问的服务器或图床时，可直接使用其完整HTTP/HTTPS链接，浏览器将向该地址发起请求获取图像数据。

1、获取图片的公网URL，例如 https://example.com/assets/avatar.png。

2、在HTML中插入 。

3、确保URL以 http:// 或 https:// 开头，且目标服务器允许跨域访问（否则可能触发 CORS 错误）。

好了，本文到此结束，带大家了解了《HTML中如何正确引入图片资源》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！