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 pass resourcesOptions.cache to render function.

import {  } from "takumi-js";

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

const  = new <string, ArrayBuffer>();

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