# 图片资源使用说明

## 文件夹结构

```
public/images/
├── logo.png              # 网站主logo
├── nav-icons/            # 导航栏图标
│   ├── home.png
│   ├── courses.png
│   └── ...
├── banners/              # 横幅图片
│   ├── hero-banner.jpg
│   └── ...
└── courses/              # 课程相关图片
    ├── course-1.jpg
    ├── course-2.jpg
    └── ...
```

## 使用方法

### 1. 导航栏Logo
将logo图片命名为 `logo.png` 并放在 `public/images/` 文件夹中，然后在 `AppHeader.vue` 中取消注释：

```html
<img src="/images/logo.png" alt="Logo" class="logo-image" />
```

### 2. 课程图片
将课程图片放在 `public/images/courses/` 文件夹中，然后在代码中使用：

```html
<img src="/images/courses/course-1.jpg" alt="课程图片" />
```

### 3. 横幅图片
将横幅图片放在 `public/images/banners/` 文件夹中：

```html
<img src="/images/banners/hero-banner.jpg" alt="横幅图片" />
```

## 注意事项

1. 图片文件名建议使用英文和数字，避免中文字符
2. 推荐的图片格式：PNG（透明背景）、JPG（照片）、SVG（图标）
3. 建议压缩图片以提高加载速度
4. Logo建议尺寸：32x32px 或 64x64px
5. 课程图片建议尺寸：300x200px
6. 横幅图片建议尺寸：1200x400px

## 图片优化建议

- 使用在线工具压缩图片（如 TinyPNG）
- SVG格式适合简单图标
- WebP格式可以提供更好的压缩率