在Node.js中使用EJS模板从PostgreSQL数据库显示图片时遇到问题

嘿，我来帮你搞定这个图片显示的问题！首先得明白：浏览器没法直接识别数据库里存的原始字节数据，咱们得做一些转换或者接口处理才能让图片正常显示。下面给你两种实用的解决方案，你可以根据自己的需求选：

方案一：把字节数据转成Base64直接嵌入页面 #

这种方式适合图片不大的情况，直接把图片编码成Base64字符串，嵌入到EJS的img标签里就行。

1. 修改数据库查询逻辑，转换字节数据 #

在你的路由里查询图片时，把fotograf字段的字节数据转换成Base64格式，还要加上图片格式的前缀（比如jpeg、png）：

// 示例路由：获取所有袜子数据并转换图片
app.get('/coraplar', async (req, res) => {
  try {
    // 先确保数据库连接配置完整（你代码里的host、password、database都要填对哦）
    await client.connect();
    const result = await client.query('SELECT id, fotograf FROM corap');
    
    // 把每条数据里的图片字节转成Base64字符串
    const coraplar = result.rows.map(row => ({
      ...row,
      // 这里假设图片是jpeg格式，如果是png就改成image/png
      fotoUrl: `data:image/jpeg;base64,${Buffer.from(row.fotograf).toString('base64')}`
    }));
    
    // 把数据传给EJS模板
    res.render('你的模板文件名.ejs', { coraplar });
  } catch (err) {
    console.error('查询出错：', err);
    res.status(500).send('服务器出问题啦');
  } finally {
    await client.end();
  }
});

2. 在EJS模板里渲染图片 #

拿到转换后的Base64字符串后，直接作为img标签的src值：

<% coraplar.forEach(corap => { %>
  <div class="corap-item">
    <img src="<%= corap.fotoUrl %>" alt="袜子图片">
  </div>
<% }) %>

方案二：创建单独的图片接口（适合大图片） #

如果图片比较大，Base64会让页面加载变慢，这时候可以写一个专门的接口来返回图片的二进制数据。

1. 编写图片接口路由 #

这个接口根据袜子的ID返回对应的图片：

app.get('/corap-foto/:id', async (req, res) => {
  try {
    await client.connect();
    // 根据ID查询图片
    const result = await client.query('SELECT fotograf FROM corap WHERE id = $1', [req.params.id]);
    
    if (result.rows.length === 0) {
      return res.status(404).send('图片找不到哦');
    }
    
    const fotoData = result.rows[0].fotograf;
    // 设置正确的图片格式类型，比如jpeg
    res.set('Content-Type', 'image/jpeg');
    // 直接返回二进制数据
    res.send(fotoData);
  } catch (err) {
    console.error('获取图片出错：', err);
    res.status(500).send('服务器出问题啦');
  } finally {
    await client.end();
  }
});

2. 在EJS模板里调用接口 #

把img的src指向这个接口，传入袜子的ID：

<% coraplar.forEach(corap => { %>
  <div class="corap-item">
    <img src="/corap-foto/<%= corap.id %>" alt="袜子图片">
  </div>
<% }) %>

几个要检查的关键点 #

• 数据库连接配置：你代码里的Client配置（user、host、password、database）一定要填完整，不然连不上数据库就拿不到图片数据
• 图片格式正确性：确认数据库里存的图片是有效的字节数据，可以用PostgreSQL命令SELECT encode(fotograf, 'base64') FROM corap LIMIT 1;，把结果复制到在线Base64转图片工具里测试能不能显示
• 模板路径配置：你的views目录设置成了tasarim，要确保模板文件确实在这个目录里，路径没写错

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