课五：网页中的图片路径 - 在线演示
相对路径、绝对路径实时效果展示与目录结构示例
1. 标准网站目录结构
website/
├── index.html
├── images/
│ ├── logo.png
│ ├── banner.jpg
│ └── products/
│ ├── product1.jpg
│ └── product2.jpg
├── css/
│ └── style.css
└── js/
└── main.js
目录结构设计原则：按文件类型分类、英文命名、层级清晰、便于维护
2. 相对路径引用演示
当前文件：index.html（根目录），引用images文件夹中的图片
路径：images/logo.png
代码：<img src="images/logo.png" alt="logo">
路径：images/products/product1.jpg
代码：<img src="images/products/product1.jpg" alt="产品1">
路径：images/banner.jpg
代码：<img src="images/banner.jpg" alt="横幅">
相对路径符号说明：
- 无符号/./：当前目录（如 images/logo.png 等同于 ./images/logo.png）
- ../：上一级目录（如从css/style.css引用图片：../images/logo.png）
- 无符号/./：当前目录（如 images/logo.png 等同于 ./images/logo.png）
- ../：上一级目录（如从css/style.css引用图片：../images/logo.png）
3. 绝对路径引用演示
绝对路径：包含完整协议、域名和路径，适用于引用外部资源
网络绝对路径
代码：<img src="https://picsum.photos/400/300?random=1" alt="外部图片">
网络绝对路径
代码：<img src="https://picsum.photos/400/300?random=2" alt="外部图片">
CDN资源绝对路径
代码：<img src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/icons/bootstrap.svg" alt="图标">
绝对路径注意事项：
- 引用外部资源必须使用网络绝对路径
- 本地开发避免使用本地绝对路径（部署后失效）
- 确保外部资源地址有效、稳定
- 引用外部资源必须使用网络绝对路径
- 本地开发避免使用本地绝对路径（部署后失效）
- 确保外部资源地址有效、稳定
4. 路径错误与正确对比
错误路径：images/log.png（文件名拼写错误）
现象：图片加载失败，显示破碎图标
正确路径：images/logo.png（文件名正确）
现象：图片正常显示
错误路径：../../images/logo.png（层级过多）
现象：图片加载失败，显示破碎图标
路径错误排查方法：
1. 检查文件名、目录名拼写（区分大小写）
2. 检查目录层级（../使用数量是否正确）
3. 检查文件是否存在于指定路径
4. 使用浏览器F12开发者工具查看控制台错误信息
1. 检查文件名、目录名拼写（区分大小写）
2. 检查目录层级（../使用数量是否正确）
3. 检查文件是否存在于指定路径
4. 使用浏览器F12开发者工具查看控制台错误信息