使用小胡子模板从 MongoDB 数据库渲染图像

Question

我在“item.hjs”页面上显示图像时遇到问题。我认为问题是从数据库进行 base64 转换。

这就是我以这种方式使用小胡子模板从数据库中呈现信息的方式：

{{#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'
      })
    })
}

这就是信息存储在 MongoDB 数据库中的方式。

物品数据库

Answer 1

Mustache 模板语言不允许您将任意 JavaScript 表达式放入 mustaches 中。 might 存在一个特定的 JavaScript Mustache 实现，它允许将此作为扩展，但我不知道这样的实现。这意味着您的问题几乎肯定在

{{Image.data.toString('base64')}}

部分。您可以检查呈现的 HTML 以验证它看起来与您期望的不同。

每当 Mustache 不允许某些事情时，解决方案几乎总是事先以正确的形状处理您的数据。在你的例子中，调用

.toString

已经在你的 JavaScript 逻辑中：

function addBase64(item) {
    const image = item.Image;
    const base64 = image.data.toString('base64');
    return {...item, Image: {...image, base64}};
}

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

现在，您可以在模板中使用

base64

属性：

{{#items}}
  <div class="card">
    <div class="card-content">
      <img src="data:{{Image.contentType}};base64,{{Image.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}}