58 lines
1.5 KiB
Markdown
Raw Permalink Normal View History

2025-07-22 14:39:45 +08:00
# 图片资源使用说明
## 文件夹结构
```
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格式可以提供更好的压缩率