图片资源使用说明

文件夹结构

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 中取消注释：

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

2. 课程图片

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

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

3. 横幅图片

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

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

注意事项

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

图片优化建议

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

1.5 KiB Raw Blame History Unescape Escape

图片资源使用说明

文件夹结构

使用方法

1. 导航栏Logo

2. 课程图片

3. 横幅图片

注意事项

图片优化建议

1.5 KiB

Raw Blame History