Load Images

External Images

By default, Takumi will fetch external images in src attributes and CSS properties like background-image and mask-image.

If you want to add additional caching layer, you can fetch the image yourself and pass the data to render() with fetchedResources.

import {  } from "takumi-js/helpers/jsx";
import { ,  } from "takumi-js";
import {  } from "takumi-js/helpers";

const  = < ="https://example.com/image.png" />;

const  = await ();
const  = await ();

const  = await (, {
  , 
});

Persistent Images

Preload frequently used images like logo, background, etc. to avoid redundant image decoding and improve performance.

The image key can be used in any src field or background-image, mask-image CSS property.

import {  } from "takumi-js/response";
import type { ImageSource } from "takumi-js";

export function () {
  return new (< />, {
    : [
      {
        : "my-logo",
        : () => ("/logo.png").(() => .()),
      },
      {
        : "background",
        : () => ("/background.png").(() => .()),
      },
    ],
  });
}

function () {
  return (
    <
      ={{
        : "url(background)",
      }}
    >
      < ="my-logo" />
    </>
  );
}

External Images

Persistent Images

On this page