使用Mustache模板从MongoDB渲染图片失败问题求助

在item.hjs页面中，使用Mustache模板渲染MongoDB数据时，标题和描述可正常显示，但图片无法加载，问题出在Base64转换环节的处理方式上。

问题代码回顾 #

Mustache模板代码

{{#items}}
  <div class="card">
    <div class="card-content">
      <img src="data:{{Image.contentType}};base64,{{Image.data.toString('base64')}}">
      <h2 class="card-title">{{Title}}</h2>
      <p class="card-description">{{Description}}</p>
      <button class="trade-button">Trade</button>
    </div>
  </div>
{{/items}}

{{^items}}
  No entries yet.
{{/items}}

后端传参代码

exports.show_items = function (req, res){
    Item.find({})
    .then(items => {
      res.render('items', { items: items });
    })
    .catch(error => {
      res.json({
        message: 'An error occurred while retrieving barters'
      })
    })
}

错误原因 #

Mustache模板不支持在模板内部直接调用JavaScript方法（如toString('base64')），模板中的{{Image.data.toString('base64')}}无法被解析执行，导致图片的Base64数据无法生成，最终图片加载失败。

修复方案 #

1. 修改后端代码，提前转换Base64

在将数据传递给模板前，先把MongoDB中的二进制图片数据转换为Base64字符串：

exports.show_items = function (req, res){
    Item.find({})
    .then(items => {
      // 处理每个条目，提前转换图片数据为Base64
      const processedItems = items.map(item => {
        const itemObj = item.toObject();
        itemObj.Image.base64Data = itemObj.Image.data.toString('base64');
        return itemObj;
      });
      res.render('items', { items: processedItems });
    })
    .catch(error => {
      res.json({
        message: 'An error occurred while retrieving barters'
      })
    })
}

2. 修改模板，使用预处理后的Base64字符串

直接引用后端生成好的Base64数据：

{{#items}}
  <div class="card">
    <div class="card-content">
      <img src="data:{{Image.contentType}};base64,{{Image.base64Data}}">
      <h2 class="card-title">{{Title}}</h2>
      <p class="card-description">{{Description}}</p>
      <button class="trade-button">Trade</button>
    </div>
  </div>
{{/items}}

{{^items}}
  No entries yet.
{{/items}}

补充说明 #

• 确保MongoDB中Image.data存储的是Buffer类型的二进制数据，这样toString('base64')才能正确转换。
• 使用item.toObject()是将Mongoose文档对象转为普通JavaScript对象，方便修改和添加属性。

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