Images Don't Appear in Browser

1

I have the following main.html code

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

and the following main.js in the client folder

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

My problem is only image1.jpg apears in the browser window.

Please help.

2

I imagine you’re suppose to return img_data rather than pass it in as variable.

3

I done that -

Template.images.helpers({
		images:function() {
			return img_data;
},

Still doesn’t work.

4

Are you seeing three <img> blocks and just no image? Or are the tags not even appearing?

5

I’ve gotten most of images to appear but some still seem to be broken. Might be their file size?

6

It could be a connection issue, or perhaps you’re linking to external assets that are blocked from hotlinking?

7

You’ll want to do

img src="/images/{{img_src"}} />`

Now, in your project, make a folder called images, in side of public

So your STRUCTURE looks like C:\meteor\my_thingy\public\images\image3.jpg

Cheers