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

Question

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:

1. I've the following snippet inside my template:

   <img src="/etc/designs/{MY_PROJ}/clientlib-site/img/logo.png"/>

2. 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!

Answer 1

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

Answer 2

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