# 书籍封面图片说明

## 当前实现

目前使用本地占位图来显示书籍封面。如果数据库中的 `coverUrl` 为空或加载失败，会显示一个渐变背景的占位图，上面显示书籍标题。

## 如何添加本地封面图片

### 方法1：使用本地图片文件（推荐）

1. **准备图片**：
   - 将书籍封面图片放入 `xiao/images/` 目录
   - 建议尺寸：200x280 像素或等比例
   - 格式：PNG 或 JPG

2. **修改代码**：
   在 `pages/detail/detail.wxml` 中修改：
   ```xml
   <image 
     class="cover" 
     src="{{content.coverUrl || '/images/books/default-cover.png'}}" 
     mode="aspectFill" 
   ></image>
   ```

3. **在数据库中设置封面URL**：
   - 如果封面在 `images/books/` 目录下，数据库中的 `coverUrl` 设置为 `/images/books/封面名.png`
   - 例如：`/images/books/huozhe.png`

### 方法2：使用网络图片URL

1. **上传图片到服务器**：
   - 将封面图片上传到你的服务器或CDN
   - 获取图片的完整URL

2. **在数据库中设置**：
   - 在 `content` 表的 `cover_url` 字段中填入完整的图片URL
   - 例如：`https://your-domain.com/images/covers/huozhe.jpg`

### 方法3：使用base64编码（小图片）

1. **转换图片为base64**：
   - 使用在线工具将图片转换为base64编码
   - 例如：https://www.base64-image.de/

2. **在代码中使用**：
   ```xml
   <image 
     class="cover" 
     src="{{content.coverUrl || 'data:image/png;base64,iVBORw0KGgoAAAANS...'}}" 
     mode="aspectFill" 
   ></image>
   ```

## 推荐方案

**最佳实践**：
1. 在服务器上创建一个图片存储目录（如 `/uploads/covers/`）
2. 将书籍封面上传到该目录
3. 在数据库的 `cover_url` 字段中存储相对路径或完整URL
4. 小程序直接使用数据库中的URL显示

## 当前占位图

目前使用本地占位图（渐变背景 + 书籍标题文字），如果数据库中的 `coverUrl` 为空或图片加载失败，会自动显示占位图。占位图使用紫色渐变背景，白色文字显示书籍标题。

## 注意事项

1. **图片大小**：建议单个封面图片不超过 200KB
2. **图片格式**：推荐使用 JPG（文件小）或 PNG（支持透明）
3. **图片尺寸**：建议 200x280 像素（或等比例）
4. **网络图片**：需要配置合法域名（生产环境）