58 lines
1.5 KiB
Markdown
58 lines
1.5 KiB
Markdown
# 图片资源使用说明
|
||
|
||
## 文件夹结构
|
||
|
||
```
|
||
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格式可以提供更好的压缩率
|