qt_books/书籍封面说明.md

书籍封面图片说明

当前实现

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

如何添加本地封面图片

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

1. 准备图片：

   • 将书籍封面图片放入 xiao/images/ 目录
   • 建议尺寸：200x280 像素或等比例
   • 格式：PNG 或 JPG

2. 修改代码： 在 pages/detail/detail.wxml 中修改：

   <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. 在代码中使用：

   <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. 网络图片：需要配置合法域名（生产环境）