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