Nunjucks：循环通过for循环中的前5项

Question

新来的Nunjucks和有类似的问题here，但我无法让我的代码工作。我试图循环14个物品的Nunjucks循环中的前5个物品。到目前为止，我发现range function应该能够做到这一点，但不能得到正确的语法。这似乎是我指向索引不正确。

我的代码获得所有14个项目是：

{% for images in index %} 
     <div class="spacer col-md-2 col-sm-6"> 
     </div> 
     <div class="yellp-img col-md-2 col-sm-6"> 
     <img src="/uploads/images/{{ images.image.filename }}" /> 
     </div> 
    {% endfor %} 

这将打印所有14个图像索引。我也可以使用打印14张图片如下：

{% for images in range(0, index.length) -%} 
     <div class="spacer col-md-2 col-sm-6"> 
     </div> 
     <div class="yellp-img col-md-2 col-sm-6"> 
     <img src="/uploads/images/{{ images.image.filename }}" /> 
     </div> 
    {%- endfor %} 

的问题，然后所有图像都被打破（印刷没有src网址的文件名），如下所示：

<img src="/uploads/images/" /> 

这可能是显而易见的，但我无法弄清楚如何限制打印多少个图像与来自文件名的数据。

---

UPDATE（响应下面AIKON的评论）：图像数据存储为JSON（使用Keystonejs CMS通过快递/节点加载）。从快速加载的数据的控制台日志如下：因此

// Load the current post 
view.on('init', function(next) { 

    var images = keystone.list('ImageUpload').model.find() 
     .sort('-createdAt') 
     .limit(5) 
     .populate('images'); 

    images.exec(function(err, result) { 
     if (result !== null) { 
      var images = result; 
      console.log('images=' + images); 
     } else { 
      console.log('404!!!'); 
      return res.status(404).render('errors/404'); 
     } 
     next(err); 
    }); 

}); 

// Load All Images 
view.query('index', keystone.list('ImageUpload').model.find()); 

// Render the view 
view.render('index'); 

：

images={ _id: 59acf4ef822f172bc92ceaf9, 
    __v: 0, 
    image: 
    { filename: 'b8LMOFEstFE0K8eW.png', 
    size: 7070, 
    mimetype: 'image/png' } },{ _id: 59acf58d822f172bc92ceafa, 
    __v: 0, 
    image: 
    { filename: 'SZSJDneW0l3DumOz.png', 
    size: 10070, 
    mimetype: 'image/png' } },{ _id: 59acf6a4822f172bc92ceafb, 
    __v: 0, 
    image: 
    { filename: 'CLlGDaqZv6gBDt1B.png', 
    size: 9235, 
    mimetype: 'image/png' } },{ _id: 59acf751822f172bc92ceafc, 
    __v: 0, 
    image: 
    { filename: 'x-K9if9xSIaDFD-0.png', 
    size: 8670, 
    mimetype: 'image/png' } },{ _id: 59acf7ac822f172bc92ceafd, 
    __v: 0, 
    image: 
    { filename: '4dTpPFWD3nqCKqcr.png', 
    size: 11181, 
    mimetype: 'image/png' } 

即从下面的代码导致我的梯形视图从MongoDB的加载通过快递/节点的图像数据索引指的是当前视图，而不是数据库模型。希望澄清。

Answer 1

// Nunjucks 
{% set length = images.length if images.length < 13 else 13 %} 
{% for i in range(0, length) %} 
<img src="/uploads/images/{{images[i].image.filename}}" /> 
{% endfor %} 

---

// Node.js + Nunjucks 
var nunjucks = require('nunjucks'); 
var env = nunjucks.configure(); 

var images = [{ 
    _id: '59acf4ef822f172bc92ceaf9', 
    __v: 0, 
    image: { 
     filename: 'b8LMOFEstFE0K8eW.png', 
     size: 7070, 
     mimetype: 'image/png' } 
    }, { 
    _id: '59acf58d822f172bc92ceafa', 
    __v: 0, 
    image: { 
     filename: 'SZSJDneW0l3DumOz.png', 
     size: 10070, 
     mimetype: 'image/png' } 
    },{ 
    _id: '59acf6a4822f172bc92ceafb', 
    __v: 0, 
    image: { 
     filename: 'CLlGDaqZv6gBDt1B.png', 
     size: 9235, 
     mimetype: 'image/png' } 
    }]; 

// You can prepare data before pass it to Nunjucks 
// var filenames = images.map((e) => e.image.filename); 

res = nunjucks.renderString(` 
    {% set length = images.length if images.length < 13 else 13 %} 
    {% for i in range(0, length) %} 
    <img src="/uploads/images/{{images[i].image.filename}}" /> 
    {% endfor %}`, 
    {images: images} // Imho, assign data to `images`-var is more readable than `index`. 
); 
console.log(res);