HTML代码中插入本地图片（jpg或png）【入门级】

2301_79863928

5816人浏览 · 2025-07-03 22:05:48

2301_79863928 · 2025-07-03 22:05:48 发布

前提假设：

如果 HTML 文件与 images 文件夹在同一目录下（例如都在 D:\HTML\ 下）

images文件夹📂中的文件：

可使用以下代码：

1. 使用相对路径（推荐）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>插入本地图片效果展示</title>
</head>
<body>
    <h1>这是蜡笔小新</h1>
    <!-- 相对路径：假设HTML文件和images文件夹在同一目录 -->
    <img src="images/lbxx.jpg"  width="128" height="128" alt="蜡笔小新">
</body>
</html>

效果展示：

2. 使用绝对路径（适用于本地测试）

jpg本地路径："D:\HTML\images\lbxx.jpg"

如果需要直接指定完整路径，可使用 file:/// 协议：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>插入本地图片效果展示</title>
</head>
<body>
    <h1>这是蜡笔小新</h1>
    <p>绝对路径效果展示<p>
    <!-- 相对路径：假设HTML文件和images文件夹在同一目录 -->
    <img src="file:///D:/HTML/images/lbxx.jpg"  width="128" height="128" alt="蜡笔小新">
</body>
</html>

效果展示：