使用Node.js、Express、EJS从MySQL获取图片问题求助

嘿，你猜的完全没错——问题核心就是没把MySQL返回的Buffer数据转换成浏览器能识别的Base64 Data URI格式。直接把Buffer对象塞给img的src属性，浏览器根本不知道这是什么，自然显示不出来。我给你一套靠谱的解决方案，分两步走：

第一步：后端处理Buffer转Base64并添加Data URI前缀 #

在你从MySQL查询到数据后，先遍历每条新闻，把图片Buffer转换成带前缀的Base64字符串，再传给EJS模板。假设你用的是mysql2或者mysql模块，代码示例如下：

// 你的路由处理代码示例
app.get('/', async (req, res) => {
  try {
    // 从MySQL查询新闻数据
    const [newsData] = await db.query('SELECT * FROM news');
    
    // 处理每条数据的图片字段
    const processedNews = newsData.map(item => {
      // 假设你的图片是JPEG格式，如果是PNG/GIF，要对应修改后缀
      const imageBase64 = `data:image/jpeg;base64,${item.image.toString('base64')}`;
      return {
        ...item,
        image: imageBase64
      };
    });
    
    // 把处理后的数据传给EJS
    res.render('index', { newsData: processedNews });
  } catch (err) {
    console.error('查询出错:', err);
    res.status(500).send('服务器出错啦');
  }
});

进阶优化：适配多种图片格式 #

如果你的数据库里存了不同格式的图片（比如PNG、GIF），建议在表中加一个字段（比如image_mime）存储图片的MIME类型（比如image/png），这样就能通用处理：

// 假设查询结果包含image_mime字段
const imageBase64 = `data:${item.image_mime};base64,${item.image.toString('base64')}`;

第二步：EJS模板直接使用处理后的字段 #

这一步不用大改你原来的代码，直接用处理后的newsData[i].image作为img的src即可：

<% for ( var i = newsData.length -1; i >= 0; i--){ %>
  <img src="<%= newsData[i].image %>" alt="新闻图片">
  <h3><%= newsData[i].title %></h3>
  <p><%= newsData[i].content %></p>
<% } %>

为什么之前的尝试无效？ #

如果你之前试过在EJS里直接调用toString('base64')，比如：

<img src="<%= newsData[i].image.toString('base64') %>">

这会只输出纯Base64字符串，缺少data:image/xxx;base64,这个关键前缀——浏览器需要这个前缀来识别“这是一张Base64编码的图片”，否则只会把它当成普通文本，自然显示不出来。

内容的提问来源于stack exchange，提问作者Mr. Beginner