上一篇
html引用本地图片
在HTML中引用本地图片需使用“，路径可为相对或绝对地址，注意区分大小写及兼容浏览器支持的图片格式（
HTML引用本地图片方法
基本语法
使用<img>标签引用本地图片，核心属性为src（路径）和alt（替代文本）。
| 标签结构 | 说明 |
|---|---|
<img src="路径" alt="描述" /> | src指定图片路径，alt提供替代文本 |
路径类型
根据HTML文件与图片的位置关系选择路径类型：
| 路径类型 | 适用场景 | 示例 |
|---|---|---|
| 绝对路径 | 从网站根目录开始定位 | src="/images/pic.jpg" |
| 相对路径 | 基于当前HTML文件位置定位 | src="images/pic.jpg"（图片在HTML同目录的images文件夹） |
支持的图片格式
| 格式 | 特点 | 兼容性 |
|---|---|---|
| JPG/JPEG | 有损压缩，适合照片 | 所有浏览器支持 |
| PNG | 无损压缩，支持透明 | 所有浏览器支持 |
| GIF | 动画支持，颜色有限 | 所有浏览器支持 |
| WebP | 现代格式，压缩率高 | 需检查浏览器兼容性 |
调整图片尺寸
可通过HTML属性或CSS控制图片显示大小：
| 方法 | 示例 | 说明 |
|---|---|---|
| HTML属性 | <img src="pic.jpg" width="200" height="150" /> | 直接设置宽高（可能变形） |
| CSS样式 | <img src="pic.jpg" style="width:200px;height:auto;" /> | 保持比例缩放 |
添加链接功能
通过<a>标签包裹图片实现点击跳转：
| 代码结构 | 效果 |
|---|---|
| “`html |
“` | 图片可点击跳转至指定URL |
常见问题与解答
Q1：本地图片无法显示怎么办？
A1：检查以下内容：
- 路径是否正确（注意大小写和斜杠方向）
- 文件是否存在于指定位置
- 相对路径是否基于HTML文件位置计算
- 清除浏览器缓存后刷新页面
- 检查控制台是否有404错误提示
Q2：图片显示变形如何保持比例？
A2：解决方案：
- 只设置宽度或高度中的一个值,另一值设为
auto<img src="pic.jpg" width="300" />
- 使用CSS的
object-fit属性：<img src="pic.jpg" style="width:200px; height:150px; object-fit:cover;" />
