Use of @{..} to resolve images in Play

[Donovan Muller]

Hi all,

This may be a stupid question but... why do you use the actions expression to resolve images in templates? (and js, styles, etc. for that matter)

For example, in your html template you would use:

1: <img src="@{'/public/images/logo.gif'}" />

but if you change that to:

2: <img src="/public/images/logo.gif" />

it still works. So why use the @{..} action then?

Also, what is the best practice when referencing images from css in Play?

Only option 2 above seems to work...

I.e.: background:url(/public/images/bg.gif);

Thanks

[Erwan Loisant]

Hi,

On Wed, Dec 15, 2010 at 23:26, Donovan Muller <donovan...@gmail.com> wrote:
> Hi all,
> This may be a stupid question but... why do you use the actions expression
> to resolve images in templates? (and js, styles, etc. for that matter)
> For example, in your html template you would use:
>
> 1: <img src="@{'/public/images/logo.gif'}" />
>
> but if you change that to:
>
> 2: <img src="/public/images/logo.gif" />
>
> it still works. So why use the @{..} action then?

There are at least 2 reasons:
1) If you install your Play application not on the root of your server
(with reverse proxy), the @ will work but not the hardcoded path
2) If you misspell your URL or inadvertently remove the image, with
@{} you get a template compilation error but with the hardcoded path
you get a 404 on the image with a broken page. The compilation error
is easy to catch and gives you a detailed message, so you can fix it
quickly while the broken page may slip undetected with the hardcoded
path.

The same is true when referencing JS or CSS files.

> Also, what is the best practice when referencing images from css in Play?
> Only option 2 above seems to work...
>
> I.e.: background:url(/public/images/bg.gif);

Yes, CSS files are static and don't go through the template compiler
(unless you decide to make them dynamic, like HTML pages). For that
reason your only choice is what you did, having the hardcoded URL.
Note that it can be relative if you want to be able to install it on a
domain not on the root.

--
Erwan Loisant

[Guillaume Bort]

For point 2 it's better to use relative path from your CSS files:

background:url(../images/bg.gif);

> --
> You received this message because you are subscribed to the Google Groups
> "play-framework" group.
> To post to this group, send email to play-fr...@googlegroups.com.
> To unsubscribe from this group, send email to
> play-framewor...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/play-framework?hl=en.
>

--
Guillaume Bort, http://guillaume.bort.fr

For anything work-related, use g...@zenexity.fr; for everything else,
write guillau...@gmail.com

[Donovan Muller]

Thanks guys, this clears it up...

[Agile Consulting]

Hi,

I've got a related question. Is it possible to use a variable to resolve the image path? For example, <img src="@{'$item.imageUrl'}" />. I've tried all kind of things, but haven't figured that out.

My item object contains the full path to the image, for example "/public/images/items/abc.png".

Thanks,

Mike

[Eduardo Araújo de Medeiros]

Well, I think that: 

<img src=${item.imageUrl} />

will solve your problem.

[]s
--Eduardo Araújo

2011/11/24 Agile Consulting <agileconsu...@gmail.com>

--

You received this message because you are subscribed to the Google Groups "play-framework" group.

To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/RPcelxTeVrsJ.

[Agile Consulting]

You're right, I tried that before but what I missed was the leading "/". In my post above, I actually wrote it with "/", however my data in the DB didn't have it... All good now.

Cheers!

[du]

But are you using the "@"?

[Agile Consulting]

No, I haven't figured that one out. I just use <img src=${item.imageUrl} /> and make sure the imageUrl is set to /public/images/... Honestly, I don't like it because I'll most certainly run into problem if / when the app doesn't run under the root context.

It solves the issue for tomorrow's presentation, but I have to get back to it and get it to work with the @.

[OMAROMAN]

Take a look at this ticket:

https://play.lighthouseapp.com/projects/57987/tickets/885-image-tag

It's kind of related.