看起来你遇到的核心问题是图片二进制数据在存储时被错误编码，导致前端无法解析，我来一步步帮你排查和解决：

问题根源分析 #

你在存储图片时用了req.file.buffer.toString('utf-8')，这是关键错误！utf-8是文本编码，二进制图片数据（比如PNG/JPG的字节流）里有很多不符合utf-8规范的字节序列，转成utf-8字符串时会丢失/损坏原始数据，后续再转base64也没法恢复成正常的图片了。

解决方案分三步走： #

1. 修正后端存储逻辑（addPage函数）

放弃utf-8转换，改用二进制安全的方式存储图片数据：

• 方案一（推荐）：转成base64字符串存储

  // 把图片Buffer直接转base64字符串，而不是utf-8
  const plik = req.file.buffer.toString('base64');
  

  这种方式存储的是纯文本，后续取出时可以直接用，不需要再转码。

• 方案二：直接存储原始Buffer（适合MySQL的BLOB字段）

  // 直接存Buffer，mysql2会自动处理为BLOB类型
  const plik = req.file.buffer;
  

2. 修正后端取数据逻辑（getAllPages函数）

根据你选择的存储方式调整：

• 如果用方案一（存base64）：不需要再转base64，直接把数据库里的字符串放进image_array

  rows.forEach(element => {
    image_array.push(element.icon); // 已经是base64字符串了
  });
  

• 如果用方案二（存Buffer）：确认数据库返回的是Buffer类型，再转base64（mysql2默认会把BLOB转成Buffer）

  rows.forEach(element => {
    // 确保是Buffer后转base64
    image_array.push(Buffer.from(element.icon).toString('base64'));
  });
  

3. 修正前端img标签的src设置

浏览器识别base64图片需要data URI前缀，你现在只给了base64字符串，浏览器不知道这是图片数据。

最好的方式是把图片的MIME类型（比如image/png、image/jpeg）也存到数据库，这样能适配所有图片格式：

• 后端存储时新增MIME类型字段：

  const mimetype = req.file.mimetype; // 从req.file里获取，multer会自动解析
  // 假设你的sites表新增了mimetype列，插入时带上
  const [re] = await (global.db).query("INSERT INTO sites VALUES (NULL, ?, ?, ?, ?, ?, ?, ?);", [plik, link, tytul, opis, user, curDate, mimetype]);
  

• 前端设置src时带上前缀：

  for(let i = 0; i< Data.Length; i++)
  {
    // 拼接data URI格式：data:[MIME类型];base64,[base64字符串]
    document.getElementById(i).src = `data:${Data.data[i].mimetype};base64,${Data.images[i]}`;
  }
  

如果暂时不想改数据库表结构，可以先试固定格式（比如假设都是PNG）：

document.getElementById(i).src = `data:image/png;base64,${Data.images[i]}`;

测试建议 #

修改完后，先在后端console.log一下image_array里的字符串，确认是完整的base64；然后看前端控制台的img元素src，确认是正确的data URI格式，这样图片应该就能正常显示了。

备注：内容来源于stack exchange，提问作者Mistermakos