Vue.js中无法显示SQLite3数据库存储图片的问题求助

问题核心原因 #

图片加载失败源于两个关键错误：

• 前端上传时错误处理了文件数据，导致后端存储的是无效二进制内容
• Vue模板的图片路径绑定语法错误，且对后端返回的base64数据重复添加前缀

分步修复方案 #

1. 修正前端上传逻辑 #

当前使用readAsDataURL获取的是带前缀的base64字符串，直接转Uint8Array会生成无效二进制。改为读取文件原始二进制：

async choose(files_) {
  const file = files_[0]; // 取第一个选中的文件
  const arrayBuffer = await file.arrayBuffer();
  this.image = new Uint8Array(arrayBuffer);
}

上传请求需设置正确的请求头，确保后端能解析原始二进制：

// 示例上传请求（axios）
await this.$axios.post(`/users/${this.userId}/photos`, this.image, {
  headers: {
    'Content-Type': 'application/octet-stream'
  }
});

2. 修正Vue模板图片绑定语法 #

Go的JSON编码器会自动将[]byte类型的Image字段编码为base64字符串，因此前端只需直接拼接data URI前缀，同时使用Vue属性绑定语法解析变量：

<img :src="`data:image/jpeg;base64,${photo.Image}`" width="300" height="300" />

如果需要兼容多种图片格式，可在后端新增mime_type字段存储文件类型，前端动态拼接：

<!-- 假设photo对象包含mime_type字段 -->
<img :src="`data:${photo.mime_type};base64,${photo.Image}`" width="300" height="300" />

3. 可选：后端多格式兼容优化 #

若需支持多种图片类型，修改数据库表结构添加MIME类型字段：

CREATE TABLE IF NOT EXISTS photo (
    photo_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
    user_id_owner_photo INTEGER NOT NULL,
    image BLOB,
    mime_type TEXT NOT NULL, -- 新增存储MIME类型的字段
    date_time datetime NOT NULL,
    UNIQUE(date_time)
);

对应更新Go结构体：

type Photo struct {
    User_id_owner_photo int
    Photo_id            int
    Image               []byte
    Mime_type           string
    Date_time           time.Time
}

前端上传时在请求头传递文件MIME类型，后端接收后存入数据库，返回时一并传给前端即可。

验证步骤 #

1. 重新上传图片，确认数据库存储的是有效二进制内容
2. 调用用户接口，检查返回的photo.Image为合法base64字符串
3. 查看页面控制台，确认无资源加载错误，图片正常显示

内容的提问来源于stack exchange，提问作者fede14