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

Showing 1-10 of 10 messages
Use of @{..} to resolve images in Play Donovan Muller 12/15/10 2:26 PM
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
Re: [play-framework] Use of @{..} to resolve images in Play Erwan 12/16/10 1:49 AM
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

Re: [play-framework] Use of @{..} to resolve images in Play Guillaume Bort 12/16/10 5:43 AM
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

Re: [play-framework] Use of @{..} to resolve images in Play Donovan Muller 12/16/10 10:43 AM
Thanks guys, this clears it up...
Re: Use of @{..} to resolve images in Play Agile Consulting 11/24/11 4:09 PM
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
Re: [play-framework] Re: Use of @{..} to resolve images in Play Eduardo Araújo de Medeiros 11/24/11 8:43 PM
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.

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.

Re: [play-framework] Re: Use of @{..} to resolve images in Play Agile Consulting 11/24/11 8:57 PM
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!
Re: [play-framework] Re: Use of @{..} to resolve images in Play du 11/24/11 9:08 PM
But are you using the "@"?
Re: [play-framework] Re: Use of @{..} to resolve images in Play Agile Consulting 11/24/11 10:41 PM
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 @.
Re: Use of @{..} to resolve images in Play OMAROMAN 11/25/11 6:42 AM
Take a look at this ticket:

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

It's kind of related.