Load Images

External Images

In order to make loading more flexible, we do not handle any fetching for you. Instead, exposes the fetched resources via fetchedResources option.

If you are using @takumi-rs/image-response, it will handle fetching for you, or you can override the default fetching behavior by passing your own fetchResources option.

import {  } from "@takumi-rs/helpers/jsx";
import { ,  } from "@takumi-rs/core";
import {  } from "@takumi-rs/helpers";

const  = new ();

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

const  = ();
const  = await ();

const  = await .(, {
  ,
});

Persistent Images

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

It's recommended to declare images in global scope so Takumi can identify and cache them with WeakSet reference to the image object.

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

import {  } from "@takumi-rs/image-response";
import type { PersistentImage } from "@takumi-rs/core";

const [, ] = await .([
  ("/logo.png").(() => .()),
  ("/background.png").(() => .()),
]);

const : PersistentImage[] = [
  {
    : "my-logo",
    : ,
  },
  {
    : "background",
    : ,
  },
];

export function () {
  return new (< />, {
    ,
  });
}

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

External Images

Persistent Images

On this page