Develop Reference

How to import static images from clientlib in a template using Adobe AEM?

I'm starting with Adobe AEM right now and as my first training, I was in need of importing a static image into a template.
I have a 100% static page but I can't seem to find out how to use an image that I've saved in /etc/designs/{MY_PROJ}/clientlib-site/img.
That's the real example of the problem I'm facing:
I've the following snippet inside my template:
<img src="/etc/designs/{MY_PROJ}/clientlib-site/img/logo.png"/>
My folder structure looks like the following (Link to imgur)
I was able to use the sly tag to import my CSS and JS correctly. But I really can't understand why I can't import images as well. Any thoughts?
Thanks in advance!

If you are able to access your image directly http://localhost:4502/etc/designs/{MY_PROJ}/clientlib-site/img/logo.png
but not in www.yourhost.org/etc/designs/{MY_PROJ}/clientlib-site/img/logo.png it could be some /filter Dispatcher configuration.
If you cannot see your image, make sure you have set the proper filter in your vault workspace like so:
<workspaceFilter version="1.0">
/etc/designs/{MY_PROJ}/
</workspaceFilter>
More info about Jackrabbit filters: http://jackrabbit.apache.org/filevault/filter.html

Have you checked in CRX/DE http://localhost:4502/crx/de/index.jsp? If the image file is not present at the designated path in crx/de, it means the package is not installed successfully.
Then check the workspace filter file (usually located at /META-INF/vault/filter.xml) and ensure the image path is included and reinstall the package and watch the logs. There should be an log entry like
A /etc/designs/{MY_PROJ}/clientlib-site/img/logo.png

How to link image into html using the intellij idea IDE?

I have got a simple html page on intellij idea that uses a java class to display the webpage on the localhost:9002/.
I am using the bootstrap library and my images are not been parsed on my webpage properly.
I am looking for someone to specify the correct directory of images within intellij and if any changes should be made to the standard image link in my html.
My image link is as follows:
<a class="navbar-brand" href="ShoppingPortal.html"><img src="logo.png" alt="Company logo" style="width:225px;height:35px; padding-bottom: 2px;"></a>
Any ideas???
Thanks

If the image is in the same directory as your .html file then adding a forward slash -> src="/logo.png" should work.
If you are going to have more than one image it might be worth while adding an images directory to your root and then updating the src src="/images/logo.png"

why doesn't the server pick up the path i give it in the image tag?

I am using glassfish. on a jsp page when i write :
<img src="/home/non-admin/project users/pic.jpg"/>
the IDE highlights the line with an error saying this is a bad value. But when i give the path( to the same image) from the directory inside the project it picks it up and displays the image. Like project/images/pic.jpg Why doesn't it pick up just any path from my system. How can i do this ?

It can't pick up any path of your system (Imagine some one is reading your system's file by just accessing path in their browser :) ), You need to write a Servlet which will read that file from your system and write to output in response

The problem is because it is based on the path to the base of the webpage, which is usually something like /var/www/htdocs To allow something in a homedirectory you can create a link to that directory from within the web directory something like ln -s /home/non-admin/project\ users/ /var/www/htdocs/userdata then use <img src="/userdata/pic.jpg"/>. Also you need to set the permissions on the directory/file to allow the www user to read it.

Reading Assets in Eclipse

I am developing a little game where I use some pictures for the sprites etc etc.
It works just fine when I load it from the disc like this
Image image = new Image("C:\\AppleMan.png");
but how can I load it from a foloder within the project. I am using eclipse as IDE and the language is Java :)
I took a screenshot of a sample project so you can see how I have importet the picture
So I want to load the picture from that resource folder like this pseudo code
Image image = getResource("Resources/AppleMan.png");
but that simply doesn't work.
Any help appreciated :)

1) You should add Resources folder to classpath
2) You should locate file absolutely, i.e. "/Resources/AppleMan.png"
P.S.
3) Sorry, also note that getResource returns URL: http://docs.oracle.com/javase/6/docs/api/java/lang/Class.html#getResource%28java.lang.String

You're passing a relative path when you were passing a absolute path before. Add the path of the Eclipse workspace.
For example, if your workspace is at C:\Workspace, you need to put
Image image = getResource("C:\\Workspace\\HowToGetResources\\Resources\\AppleMan.png");

How to use background image in CSS?

I am using the background image in my application in CSS . I am using the following code to get the background image file
background-image: url("Image\GREEN.GIF");
but I am not able to get the Image .. I know that it is path problem .. I can able to get the
absolute path in java using
path=new File("web/CSS/myimage.gif").getAbsolutePath();
but in CSS how to get the absolute path..
please help me in getting the absolute path in CSS
Thanks in Advance
Raj

url("Image\GREEN.GIF")
should be
url("Image/GREEN.GIF")
Relative URLs should work perfectly well in CSS, so you don't need absolute URLs. Just be aware that some URLs are relative to the stylesheet, not the HTML that loads it.

I'm not sure there is a way to get the absolute path via CSS, but can you not use relative paths here?
Say you have the following:
-root
-----css
-----img
In order to then reference your images from you css file, you would simply put a path of
background-image: url("../img/myfile.gif");

Also remember that the item your giving the background image to must have content in it, or set dimensions! Otherwise nothing will show!

You don't need absolute URLs.Normally,the urls in stylesheet are relative to the stylesheet,but if you define the mouse cursor's image,URLs relative to the stylesheet are not supported by IE,you should set the path relative to root path or use absolute path.