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 (, {
  : {
    ,
  },
});

Pre-fetched Images

Provide images by key so the renderer doesn't have to fetch them itself. Each key can be used in any src field or in the background-image / mask-image CSS properties.

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

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

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

Takumi caches each decoded image so a repeated src is decoded once. The cache mode on an image controls that cache and is independent of the byte cache above: resourcesOptions.cache stores fetched bytes, while cache stores the decoded pixels.

auto (default): cache the decoded image; the entry is evictable.
none: skip the cache. Use it for a one-off image you won't render again, to avoid holding its pixels in memory.

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

export function () {
  return new (< />, {
    : [
      {
        : "banner",
        : () => ("/banner.png").(() => .()),
        : "none", 
      },
    ],
  });
}

External Images

Pre-fetched Images

Decode caching

On this page