3

Nunjucks 的新手，在这里遇到了类似的问题，但我无法让我的代码正常工作。我正在尝试遍历 14 个项目的 Nunjucks 循环中的前 5 个项目。到目前为止，我发现range 函数应该能够做到这一点，但无法获得正确的语法。好像我指向的索引不正确。

我获取所有 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 url 中没有文件名的情况下打印），如下所示：

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

这可能很明显，但我不知道如何限制使用文件名中的数据打印多少图像。

更新（回应下面 Aikon 的评论）：图像数据存储为 JSON（使用 Keystonejs CMS 通过 Express/Node 加载）。从 Express 加载的数据的控制台日志如下：

    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' }

这是由于我的 keystone 视图中的以下代码通过 Express/Node 从 MongoDB 加载图像数据：

    // 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');

所以 index 指的是当前视图，而不是数据库模型。希望这可以澄清。

4

2 回答 2

2 
// 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);
于 2017-09-06T11:04:01.820 回答
2

您可以使用loop.index值（文档）以可移植的方式限制数字：

{% for images in index %}
  {% if (loop.index <= 5) %}
    <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>
  {% endif %}
{% endfor %}
于 2021-01-05T10:06:14.957 回答