可通过相对路径、绝对路径或网络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:photosbanner.jpg），可通过 file:// 协议强制指向该位置，但该方式仅限本地测试且存在浏览器安全限制。
1、复制图片完整路径，例如 D:mywebimagesphoto.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_在HTML中引入外部图片资源【资源】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605272.html
微信扫一扫 
支付宝扫一扫 
