CODEWITHSUNDEEP
javascriptmeteor
swayziak
swayziak

Reputation: 353

Public folder isn't working in Meteor

I'm trying to serve an image to my meteor app so I put the image in the public folder, but the image doesn't appears in the app (it shows only a broken image). But when I put the image in the root folder it works perfectly.

In other question related with this kind of problem I was that I should look in side the app_root/.meteor/build/static/, but in my app I don't have any static folder inside the build folder

What could be the problem?

Upvotes: 1

Views: 1573

Answers (2)

Phil Heinz
Phil Heinz

Reputation: 59

It wasn't working for me either until I stumbled upon the reason. If you are serving a page that is on the root ('/'), any image like this will work as long as myImage.jpg is located in the public directory:

<img src="myImage.jpg"/>

It will work as long as your pages are on the root route. However, if you are serving a route like /pages/HJ4HIW87JURE6JU8, if you use the same image tag, it will not find the image in public. In order to make this work, you need to add a / to your image tag to tell it to start from the root:

<img src="/myImage.jpg"/>

Using the root slash, you can serve images from public from anywhere in your route structure.

Upvotes: 0

random-forest-cat
random-forest-cat

Reputation: 35884

It's recommended you use ./public directory for serving static assets.

Given the following directory structure:

- server
- client
- public
  - css
    - bootstrap.css
  - images
  - js

You could serve the static assets by dropping 'public' from linked documents.

<link href='/css/bootstrap.css'>

Files in /public are served to the client as-is. Use this to store assets such as images. For example, if you have an image located at /public/background.png, you can include it in your HTML with or in your CSS with background-image: url(/background.png). Note that /public is not part of the image URL.

Official Meteor Docs - File Structure

Upvotes: 1

Related Questions