Currently, I am working on a Meteor course that uses an older version of the platform. I find myself unsure about where to properly place files and folders within my project structure. In particular, I have images stored in a public folder located within my main directory along with the following client-side code found in main.html:
<head>
<title>image_share</title>
</head>
<body>
<h1>Welcome to Coursera!</h1>
{{>images}}
</body>
<template name="images">
{{#each images}}
<img src="{{img_src}}" height="100" alt="{{img_alt}}" />
{{/each}}
</template>
In addition to this, there is also client-side code contained in main.js:
if (Meteor.isClient) {
console.log("I am the client");
var img_data = [
{
img_src:"image1.jpg",
img_alt:"dental surgery"
},
{
img_src:"image2.jpg",
img_alt:"carribean night"
},
{
img_src:"image3.jpg",
img_alt:"full moon palm tree"
},
];
Template.images.helpers({images:img_data});
}
Unfortunately, I encountered an issue where only image1.jpg appears in the browser window.