Images do not nest in html

[daslu]

The following example:

(ns images
  (:require [nextjournal.clerk :as clerk]))

(import javax.imageio.ImageIO
        java.net.URL)

(clerk/html
 [:div
  [:h1 "image1"]
  (ImageIO/read (URL. "https://images.unsplash.com/photo-1532879311112-62b7188d28ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8"))
  [:h1 "image2"]
  (ImageIO/read (URL. "https://images.unsplash.com/photo-1532879311112-62b7188d28ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8"))])

results in the following:

Thanks!

[jackrusher]

I have no idea what you had expected to happen in this case.

[daslu]

Thanks,

Here is the Slack discussion for reference: https://clojurians.slack.com/archives/C035GRLJEP8/p1647906226495609

What I was wondering about was how to embed BufferedImage values in a Hiccup block.

[jackrusher]

The linked Slack thread doesn't make clear what output you might have expected given the semantics of clerk/html, which in turn leaves me unsure how to help you.

[daslu]

I might have expected to see the corresponding images inside the div, since typically, Clerk viewer types nest.

Edit: But I was wondering about it too, still new to Clerk semantics. This is documented as an Issue here simply because I was asked to do that on the Slack thread.

[jackrusher]

Let me try to refine my question a bit: if you are using the html viewer to build a hiccup representation of some HTML you would like to show the user, what would it mean to dump the binary data of an image in the middle?

I would expect something like [:img {:src (url-for (ImageIO/read ...))}] in this place so that you have control over the CSS applied to the element, can supply click handlers, and so on. (Note that this currently doesn't work! But to come up with a good solution that gives the user full power and no magic, we need to consider what should happen.)

[daslu]

Thanks, yes, I'm not sure about the desired API.

So, maybe the ticket title should have been: "What is the recommended practice for showing a few images in a div?".

A few thoughts:

• Currently, a top-level form returning a BufferedImage just renders as an image in the Clerk notebook, without asking the user to care about serving it through a URL, etc.
• This is quite useful. Example use cases:
  • The user is doing some image processing and wants to just see the resulting image.
  • The user is getting an image from a plotting library (e.g., cljplot) and just wants to see it.
• I think that Clerk tends to render things (e.g., Vega plots) the same when nested inside a div and when not.
• I think this kind of consistency is nice. That is probably what made me assume some desired behavior here.

[jackrusher]

I agree that serving BufferedImages as visible images is useful, that's why we made that feature! In this case, it's not clear what we want to do inside html blocks, so there's going to be some design work around what feels right. :)