generated from Java-2025Fall/final-vibevault-template
57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
# 图片放置指南
|
||
|
||
## 1. 获取截图
|
||
|
||
您可以使用以下方法获取VibeVault音乐平台的界面截图：
|
||
|
||
### 方法一：使用浏览器截图功能
|
||
1. 打开http://localhost:3000/（确保前端开发服务器已启动）
|
||
2. 访问您需要截图的页面（首页、歌单详情、歌曲播放等）
|
||
3. 按键盘快捷键：
|
||
- Windows：`Win + Shift + S`（可选择区域截图）
|
||
- macOS：`Command + Shift + 4`（可选择区域截图）
|
||
4. 选择需要截图的区域
|
||
|
||
### 方法二：使用浏览器开发者工具
|
||
1. 打开浏览器开发者工具（F12或右键选择"检查"）
|
||
2. 切换到"设备工具栏"（通常是一个手机/平板图标）
|
||
3. 选择合适的设备尺寸进行响应式设计查看
|
||
4. 点击截图按钮（通常是一个相机图标）
|
||
|
||
## 2. 保存截图到images目录
|
||
|
||
1. 将截取的图片保存到以下位置：`c:\Users\23175\2311061106\images\`
|
||
2. 确保文件名与FRONTEND.md中引用的一致：
|
||
- 首页：`homepage.png`
|
||
- 歌单详情：`playlist-detail.png`
|
||
- 歌曲播放：`song-playing.png`
|
||
- 用户中心：`user-center.png`
|
||
- 搜索界面：`search.png`
|
||
|
||
## 3. 验证图片显示
|
||
|
||
1. 保存图片后，打开FRONTEND.md文件
|
||
2. 使用Markdown预览功能查看图片是否正确显示
|
||
- 如果使用VS Code，可以点击右上角的"预览"按钮
|
||
- 或者使用其他Markdown查看器打开文件
|
||
|
||
## 4. 图片要求
|
||
|
||
- 图片格式：推荐使用PNG格式，保证清晰度
|
||
- 图片尺寸：建议宽度不超过1200px，高度自适应
|
||
- 图片质量：确保图片清晰，能清楚展示界面元素
|
||
|
||
## 5. 示例
|
||
|
||
如果您已经成功保存了首页截图，FRONTEND.md中的以下代码会显示图片：
|
||
|
||
```markdown
|
||
|
||
这是VibeVault音乐平台的首页界面，采用现代化的卡片式布局...
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
- 请确保图片文件名与FRONTEND.md中的引用完全一致（包括大小写）
|
||
- 图片文件必须直接放在images目录下，不要创建子目录
|
||
- 如果需要添加新的图片，请先在FRONTEND.md中添加引用，然后再保存图片文件 |