Today we adjusted the way some images are displayed in one of the widgets on the dashboard. We had a problem though. When we turned the server on and initialized the widget, the images couldn’t be found. The absolute path for the folder with our images in them is:

dojo-dashboard/resources/public/css/images

and so we tried

[:img {:src (str ".images/" event-type ".png")}]

No go.

[:img {:src (str "..images/" event-type ".png")}]

Also no. How about:

[:img {:src (str "../../../../resources/public/css/images" event-type ".png")}]

No way José.

It turns out the correct way of doing it for our project is like so:

[:img {:src (str "css/images/my_image_here.png" event-type ".png")}]

In doing some research into filepaths as they relate to CSS, I stumbled across this handy set of advice. Had I started with the Joodo tutorial on the subject, perhaps I would have discovered the solution much sooner. In their example images are placed outside of the CSS file (images aren’t CSS!) like so:

tutorial: [:img {:src "/images/logo.png"}]