embedding local image about clerk

[genmeblog]

Let us know when embedding files will be added natively.

[mk]

It includes the image as base64 encoded inside the html, which has pros and cons.

This is currently only happening when generating a static html, when Clerk is running it's served via another request. We'll consider a knob in the future to allow publish images as files in the future.

[mk]

This works right now but we want to make this easier, probably even include default viewers so this works out of the box.

;; # 🏞 Customizing Fetch
;; Showing how to use a custom `fetch-fn` with a `content-type` to let Clerk serve arbitrary things, in this case a PNG image.
(ns ^:nextjournal.clerk/no-cache image
  (:require [nextjournal.clerk :as clerk]
            [babashka.fs :as fs])
  (:import (java.nio.file Path Files)))


;; We set a custom viewer for `java.nio.file.Path` that includes a `:fetch-fn`, returning a wrapped value with a `:nextjournal/content-type` key set.
(clerk/set-viewers! [{:pred #(instance? Path %)
                      :fetch-fn (fn [_ path] {:nextjournal/content-type "image/png"
                                              :nextjournal/value (Files/readAllBytes path)})
                      :render-fn (fn [blob] (v/html [:img {:src (v/url-for blob)}]))}])

(fs/path "/Users/mk/dev/clerk-demo/datasets/james_clerk_maxwell.png")

[behrica]

I have tried this as well for dynamically generated images.
It is working as well for that case.

It includes the image as base64 encoded inside the html, which has pros and cons.
I am bit concerned on performance on this, but have not data so far

[genmeblog]

Thanks!

base64 encoding will blow the size of html for more than several images. base64 adds 25% of original size of the image.

Question about above example, what about support for more than one image type (say: png, jpg and gif)?
Also: does it work for relative paths and after building static pages? I want to push html to github and be sure that images still will be visible.

(haven't tried it yet)

[genmeblog]

Ok, look like it works well and images are embedded inside static html when building is done. Maybe consider copying files?
Multiple mime types can be recognized from a path and extension (and should be bundled to cover most popular file types).

Anyway it works well without too much hassle. Thanks a lot!