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 URL에 파일 이름없이 인쇄)를 다음과 같이

이

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

이 아마 분명하다을하지만, 파일 이름의 데이터로 인쇄 할 수있는 이미지의 수를 제한하는 방법을 알 수 없습니다.

---

UPDATE (아래 Aikon의 코멘트에 응답) : 이미지 데이터 (Keystonejs CMS를 사용하여 명시 적/노드를 통해로드) JSON으로 저장됩니다. 내 키스톤보기에 다음 코드의 결과

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를에서 익스프레스/노드를 통해 이미지 데이터를로드 :

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

을 그래서 다음과 같이 Express에서로드 된 데이터의 콘솔 로그는 index는 데이터베이스 모델이 아닌 현재 뷰를 나타냅니다. 잘하면 그 명확하게.

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