Image data loaders

for server side rendering (SSR)

The examples below all import the same basic function, that calls Plot and returns a DOM element. Its inputs are:

• document — which linkedom will provide for server-side rendering
• dark — a boolean indicating whether we want the dark mode version

The images are rendered server-side, with data loaders that build a snapshot image. The client does not access the data, its browser only downloads the resulting image asset. For example, as an SVG image:

On this page, for the purpose of the demo, we are very greedy and want a light and a dark mode version, both for SVG and PNG formats; as a consequence, we need four data loaders:

For the page to select the images it needs to load, based on the user’s preferred color mode, we use the reactive dark variable:

const assets = dark
  ? {
      png: FileAttachment("becker-barley-ssr-dark.png"),
      svg: FileAttachment("becker-barley-ssr-dark.svg")
    }
  : {
      png: FileAttachment("becker-barley-ssr.png"),
      svg: FileAttachment("becker-barley-ssr.svg")
    };

For example, to display a small png:

display(await assets.png.image({style: "max-width: 320px"}));