15

I've seen this question come up a lot;

  • How do I put images on my Meteor website?
  • How do I host "standard" web content with Meteor?
  • I tried adding a <img src="img/myimage.png"> tag but no image shows!
  • How can I host some files on a Meteor site?
Christian Stewart
  • 15,217
  • 20
  • 82
  • 139

2 Answers2

45

Put the content in a folder named "public" in your project root.

  • You do not need to include /public in your URLs.
  • Any additional folder structure within public is supported.
  • NodeJS routing plugins are not required, as other answers have supplied.
  • Place external library's javascript files in /lib. They will be automatically included.

Explanation

In Meteor, you can host "standard" web content by creating a "public" directory in the root of your project. Any images, files, or data you place in this folder will be served as normal by the NodeJS server, as if they were in the root of the server.

Example

  • Structure within project: /public/test/img.png
  • Corresponding image URL: /test/img.png
  • Example HTML tag: <img src="/test/img.png"/>
Tarang
  • 75,157
  • 39
  • 215
  • 276
Christian Stewart
  • 15,217
  • 20
  • 82
  • 139
  • 1
    just wanted to add, the **/** at the beginning is important. – nooitaf Mar 02 '13 at 14:19
  • 1
    From what I've been able to find for documentation this in Meteor is if you don't want the page to be refreshed every time a file in a folder changes, add "~" to the end of the folder or file. If I do this, the above examples stop working! – Dave Jun 05 '13 at 14:31
  • @Dave Adding ~ to the end of something indicates it's a temporary file, which Meteor ignores. This is standard naming convention on linux. Please don't intentionally add a ~ to the end of your project files.. – Christian Stewart Apr 22 '14 at 15:37
  • I have it so the server can save images into the public folder, but the server restarts each time it does! Will this happen in production? – Nearpoint Jul 04 '14 at 18:17
  • @nearpoint It won't happen in production but that's also the wrong way to go about storing and serving dynamic images. – Christian Stewart Dec 15 '14 at 03:36
0

Create a new folder public inside the project directory. Add a new folder img (or any other name of your choice) inside the public folder. Copy all the images that you require to be added in to your HTML into this folder.

Now you can use it like - <img src="img/myimage.png">

You don't need to include /public in the in the URL.

Sanath Kumar
  • 237
  • 1
  • 12