基于Express+KeystoneJS的Nunjucks异步渲染图片源异常问题

我来帮你排查并搞定这个问题！你遇到的<img src="[object Promise]">本质是因为模板拿到的是未解析的Promise对象，而非异步操作完成后的真实图片地址字符串。结合你的KeystoneJS + Express + Nunjucks场景，给你几个可行的解决步骤：

1. 在Controller中提前解析Promise（最推荐方案） #

不要直接把异步获取图片的Promise传给模板，而是先等待异步操作完成，拿到实际的图片地址后再传递给模板：

// controller.js (KeystoneJS app)
async function indexController(req, res) {
  try {
    // 等待异步数据库操作完成，拿到真实的图片源地址
    const imageSrc = await yourAsyncDatabaseFunction();
    
    // 将解析后的地址传给模板，而不是Promise对象
    view.render('index', { imageSrc }, (err, renderedHtml) => {
      if (err) {
        console.log('err at index render', err);
        return res.status(500).send('页面渲染失败');
      }
      res.send(renderedHtml);
    });
  } catch (dbErr) {
    console.error('从数据库获取图片失败:', dbErr);
    res.status(500).send('图片加载失败');
  }
}

2. 确认Nunjucks的异步配置完全生效 #

你已经设置了web: { async: true }，但还要确保Nunjucks初始化时也开启了异步支持，否则模板无法处理异步逻辑：

// 你的Express/Nunjucks初始化代码
const nunjucks = require('nunjucks');
const env = nunjucks.configure('views', {
  express: app,
  async: true // 必须开启这个，才能支持模板内的异步操作
});

3. 若需在模板中处理异步（备选方案） #

如果你确实需要在模板里直接处理Promise，可以给Nunjucks注册一个await过滤器，专门用来解析Promise：

// 在Nunjucks环境中注册自定义过滤器
env.addFilter('await', async function(promise) {
  return await promise;
});

然后在模板中使用这个过滤器：

<!-- index.njk -->
<img src="{{ imageSrcPromise | await }}" alt="加载的图片">

不过这种方式会让模板逻辑变复杂，更推荐在Controller层就完成异步解析，让模板只负责渲染静态数据。

4. 修正render回调的用法 #

你当前的render回调写法存在问题，回调函数的第二个参数是渲染后的HTML内容，而非res对象。正确的回调用法应该是直接把渲染结果发送给客户端，或者处理错误：

view.render('index', (err, html) => {
  if (err) {
    console.log('err at index render', err);
    return res.status(500).send('渲染出错');
  }
  res.send(html);
});

按照上面的步骤调整后，应该就能正常显示图片地址，而不是[object Promise]了！

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