How to call Object items in array with Mongo/Meteor? - meteor

Question

In my Mongo database, I have products and each of these products have images.
I would like to know how I can call each image in put them in a Meteor template. I know things like {{#each}}{{/each}} exist, but I don't know how to capture the images object.
With this code...
Template.products.helpers({
product: function () {
return ProductList.find();
}
});
I am able to call the first image like:
<img src="{{images.[0]}}" alt="{{title}}"/>
I could hardcode the rest of the images, but I would like to do this dynamically. Any tips?
EDIT: Here is the expected HTML output (the extra classes on .content__product are added dynamically via a separate function):
<section class="content__products">
<figure class="content__product selected">
<img src="/images/product/tt-shirt-01.jpg" alt="Time Travel Tee">
</figure>
<figure class="content__product move-down">
<img src="/images/product/tt-shirt-02.jpg" alt="Time Travel Tee">
</figure>
<figure class="content__product">
<img src="/images/product/tt-shirt-03.jpg" alt="Time Travel Tee">
</figure>
</section>

Answer 1

each works for both cursors and arrays, so you can do something like this:
{{#each products}}
<h2>{{title}}</h2>
{{#each images}}
<img src={{this}} alt={{../title}}>
{{/each}}
{{/each}}
Recommended reading: A Guide to Meteor Templates & Data Contexts

Answer 2

{{#each}} only accepted array or cursor of Mongo collection. So you have to change your object to array and make another template.
This is sample code for you.
if(Meteor.isClient){
Template.product.helpers({
list : function(){
return Products.find({});
}
});
Template.productImg.helpers({
imgList: function(){
var imgs = [];
_.each(this.images, function(img){
imgs.push({imgPath: img});
});
return imgs;
}
});
}
<template name="product">
{{#each list}}
{{> productImg}}
{{/each}}
</template>
<template name="productImg">
{{#each imgList}}
<img src="{{imgPath}}" alt="{{../title}}"/>
{{/each}}
</template>

Answer 3

For an individual product page I would do it like this:
Template.products.helpers({
'products': function() {
return ProductList.find();
}
});
Multiple images per product:
<section class="content__products">
{{#each products}}
<figure class="content__product">
{{#each images}}
<img src="{{this}}" alt="{{../title}}">
{{/each}}
</figure>
{{/each}}
</section>
Single image per product:
<section class="content__products">
{{#each products}}
<figure class="content__product">
<img src="{{images.[0]}}" alt="{{../title}}">
</figure>
{{/each}}
</section>

Answer 4

Okay, so the code posted here helped me out, but didn't solve my issue out of the box. Here is how I changed my code:
if (Meteor.isClient) {
Template.products.helpers({
product: function () {
return ProductList.find();
}
});
Template.product.helpers({
imgList: function () {
var imgs = [];
_.each(this.images, function (img) {
imgs.push({imgPath: img});
});
return imgs;
}
});
}
And, my template:
<template name="product">
<section class="content__products">
{{#each imgList}}
<figure class="content__product">
<img src="/{{imgPath}}" alt="{{../title}}"/>
</figure>
{{/each}}
</section>
</template>