[solved] Get url from image in public folder

help
1

I’m retrieving the url of an image stored with collectionFS like so:

var imageurl = Images.findOne({...}).url();

Now I also need the url of a static image stored in the public folder.

Obviously this makes no sense:

var logoimage = (logo.png).url();

But how do I go about this?

2

Everything under the public folder can be accessed directly with a URL.

For example, if you have the image directly under public:

project/public/logo.png
localhost:3000/logo.png

Or in a deeper folder:

project/public/assets/images/logo.png
localhost:3000/assets/images/logo.png

3

The problem is that i need to convert an image to a data uri.

So I do this:

First I grab the url from an image stored with collectionFS:

var imageurl = Images.findOne({...}).url();

Then I pass this url to a function that converts it to a data URI like so:

getDataUri(imageurl, function(imageurlDataUri) {
    // do stuff with the data URI
}

Done. This works as intended.

But now I need to do the same with a static image in the public folder.
For this I need a variable that holds the url of such a static image. Something like:

var logoimage = AssetsFromPublicFolder.findOne(logo.png).url()

Obviously this wont work.

I could just do this:
var logoimage = "http://localhost:3000/logo.png"

But this would break in production and I have the feeling that its not the right way?

Any ideas?

4

There are several solutions:

  1. save everything using CFS.
  2. write a wrapper, which will accept url, and return object with .url() function.

BTW, why do you need something in public folder? Usually public folder is used to hold design assets to use them in css files. But even in this case is better to use some shared folders served by nginx (faster and less cpu).

5

I’m generating PDFs which contain some images uploaded by the user.
But also some static images like a watermark in the background.

Okay, I’ll look at writing a wrapper for the static images.
Thanks :slightly_smiling:

6

Hmm. I don’t see the difference between url i got from CFS function and usual url.
Maybe you can check parameter in your function and if it get FS obj, then get url by calling function, otherwise use what it received. Or split this function to 2 functions, 1st will form urls for 2nd.

7

Just use a relative URL:

<img src="/logo.png">

8

Hm, either there is something really simple I’m missing or I’m just explaining things in a bad way. I know I can simply use the name of the image file in my templates or my css and meteor takes care of the rest. (like @maartenbusstra pointed out)

But how do I do the same in my Javascript files if I need the full url of an image in my public folder.

To be more specific I need two different variables.

One with the url to an image stored with collectionFS. I’ve already figured this out:

var imageurl = Images.findOne({...}).url();

The other with the url to an image in my public folder. How would you write that?

var logoimage = logo.png; like I would do in my templates or my css obviously doesn’t work here.

And since it’s not stored in any collection I also can’t use a .find().url() to get the url.

I could just hardcode the local url in like so: var logoimage = "http://localhost:3000/logo.png", but this would break on the deployed version and it just feels wrong.

Sound how would you write the second variable that holds the url to the image from my public folder?

9

Unless I’m completely misunderstanding you, you can just go with the method I mentioned. This won’t break in production, because it’s a relative URL. (to the hostname)

EDIT: To clarify; you don’t write:
var imageUrl = 'http://localhost:3000/logo.png'
but:
var imageUrl = '/logo.png'

(I would still recommend a nested folder, something like public/assets/images/)

This is assuming that using the public folder is indeed the proper solution for your use-case. Which I do think it is, because you’re referring to a logo. (will not change based on user input)

Maybe you can provide a bit more source-code to better understand your situation? You can also hit me up on Slack if you want. The Meteor Chef has an open Slack: http://slack.themeteorchef.com/. My handle there is @maarten.

1 Like
10

You can use Meteor.absoluteUrl(‘path to image’); It will not break at production.
Here: http://docs.meteor.com/#/full/meteor_absoluteurl

11

Thanks @maartenbusstra and @chipjuggler.
Both approaches work perfectly.

I’m totally surprised that var imageUrl = '/logo.png' works!
I was certain that this could not work, since javascript would treat the variable as a simple string.

Well i guess thats meteor magic for me.
Are there any downsides to either of those ways?

Anyway, thanks a lot!!

12

Why would a string not work? :slight_smile:

Are you using React or Blaze?

13

I’m using Blaze.
Haha, well I have no clue why I thought that. Feeling stupid right now :smiley:

Anyway, it works! Thats great ^-^

14

Don’t feel stupid! Knowledge !== intelligence. :slightly_smiling:

1 Like