本地图片组件测试页面
测试说明
这个页面用于测试新的本地图片组件。在运行测试之前，请确保已经执行了以下步骤：
- 运行
yarn download-r2-images下载图片到本地 - 确认
public/images/coloring-pages/目录中有图片文件 - 检查浏览器开发者工具中的网络面板，确认图片优化正常工作
LocalImage 组件测试
Thumbnail (300x300)
Image not available
Card (500x500)
Image not available
Detail (800x800)
Image not available
Colored Version
Image not available
LocalDownloadButton 组件测试
LocalColoringCard 组件测试
Free
Premium
性能测试
检查项目
- 打开浏览器开发者工具的网络面板
- 刷新页面，观察图片加载情况
- 确认图片格式是否为 WebP（支持的浏览器）
- 检查图片尺寸是否符合预设配置
- 测试懒加载功能（滚动页面时图片才加载）
- 验证下载按钮功能是否正常
- 测试卡片悬停效果（单色/彩色切换）
故障排除
常见问题
图片不显示：
- 检查
public/images/coloring-pages/Adorable-Fluffy-Puppy/目录是否存在 - 确认图片文件是否已下载
- 查看浏览器控制台是否有错误信息
下载按钮不工作：
- 检查图片文件路径是否正确
- 确认浏览器允许下载
- 查看网络面板中的请求状态
图片优化不生效：
- 确认 Sharp 已正确安装
- 检查 Astro 配置中的图片服务设置
- 重新构建项目