clojureclojurescripthiccup

How do I make a clickable image in Clojure with Hiccup

Right now I have a logo and then a link to the homepage. I want to combine them so that someone can click the logo and be directed to the homepage. I can't figure out how to do this with Hiccup.

    [:div.navbar-brand
         [:img {:src "/img/logo.png"
                :width 70
                :height 50}]
         
         [:a.navbar-item
          {:href "/"
           :style {:font-weight "bold"}}
          "Home"]

I am trying to do something like

    [:a.navbar-item
          {:href "/"}
           {:img {:src "/img/logo.png"
                  :width 70
                  :height 50}}]

But it's not working. What do I do?

Solution

  • Img is element inside a, not attribute of a, so use square brackets:

    [:a.navbar-item
           {:href "/"}
           [:img {:src "/img/logo.png"
                  :width 70
                  :height 50}]]