I just started with Meteor and ran into this problem. I created a public folder in the root directory and img1.jpg is in the public folder. The browser only displays the alternative text and won’t display the image itself. Tried a few things but none worked. Could anyone help me?
My code is
What root directory did you create the public folder in? Are you running your meteor app in development mode or production? What does the web browser console tell you?
The public folder is on the same level with folders like client, server, node_nodules, etc. It’s in development mode. The console didn’t display any error msg. It looks like this
I would check the network tab in your browser and see if there is an issue with GET of the image. Also make sure the permissions on the filesystem allow access to the image. Have you checked what happens when you tried to access the image directly with http://localhost/img1.jpg ?
When I tried http://localhost:3000/img1.jpg, it showed me the same page. Just noticed there is actually an error msg on the console
Do you know what this means?
Hmm, I just created a quick project to reproduce this and it’s working here. Are you using a router?
public/homer.jpg
<template name="homer">
<img src="/homer.jpg">
</template>
Weird. I’m using wifi, so I do have a router, if that’s what you mean.
I just tried something else. If I replace “/img1.jpg” with an image url from the internet, the browser can display the image. I checked the network tab. When I use “/img1.jpg”, the image doesn’t have a preview and the content-type shows text/html. When I use a url from the internet, the content-type is image/jpeg.
You need to share more of your application, or create a small reproduction. You must be doing something wrong, because it works here. What OS is your application on? Is it behind nginx or apache? Or are you connecting straight to http://localhost:3000 when you do meteor run in your application directory?
Oh, and when I asked about what router, I meant are you using meteor packages like Iron Router or Flow Router
I just did a small test project with meteor create images and created a public folder in that directory with mkdir images/public and copied an image img.jpg into that public folder.
Then I modified images/client/main.html like so and it simply works. I can even access http://localhost:3000/img.jpg directly
<head>
<title>images</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
{{> info}}
{{> images}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
<template name="info">
<h2>Learn Meteor!</h2>
<ul>
<li><a href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a></li>
<li><a href="http://guide.meteor.com" target="_blank">Follow the Guide</a></li>
<li><a href="https://docs.meteor.com" target="_blank">Read the Docs</a></li>
<li><a href="https://forums.meteor.com" target="_blank">Discussions</a></li>
</ul>
</template>
<template name="images">
<img src="/img.jpg">
</template>
My system is Windows10. I didn’t install apache or nginx. I think it connects straight to http://localhost:3000
I just repeated the test project you did, even with same folder and file names, but the image still won’t display. Maybe there is something wrong with my system?
Yeah, something seems funky with your system. Do you have access to any other system?
I will try on my friend’s computer when I get a chance. Thank you for all your help!
Looks like you removed the sample html, but did not remove the sample js. This will hang your page I bet.
I think you can just delete main.js and it should work. Or as @jamgold did, you can leave the "hello" and "info" templates in the html file and it should work.
I am a just started to use meteor by tutorials from a course and they were using older version and i could not use images . the same problem but it was fixed when i moved the public folder to the project file.
I was using public file inside the client folder thinking with html mentality for the src