可通过相对路径、绝对路径或网络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:// 协议加载资源，需配合本地服务器运行或启用特定启动参数才可能生效。
当图片已上传至公开可访问的服务器或图床时，可直接使用其完整HTTP/HTTPS链接，浏览器将向该地址发起请求获取图像数据。
1、获取图片的公网URL，例如 https://example.com/assets/avatar.png。
2、在HTML中插入 
。
3、确保URL以 http:// 或 https:// 开头，且目标服务器允许跨域访问（否则可能触发 CORS 错误）。
以上就是如何将图片引入html_在HTML中引入外部图片资源【资源】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
963
收藏
