Skip to main content
DOMMedia generates self-closing HTML media elements as strings. Currently it exposes createImage for <img> elements. The class sets selfCloseTag = true on the base DOM instance, so all elements it produces are rendered without a closing tag.

​
Import

import { DOMMedia } from "@anikitenko/fdo-sdk";

​
Constructor

new DOMMedia()
No parameters. DOMMedia extends DOM with selfCloseTag = true to produce self-closing elements.

​
Methods

​
createImage

Creates an <img /> element with src, alt, and optional additional attributes. 
createImage(
  src: string,
  alt: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string,
  otherProps?: Record<string, any>
): string
​
src
string
required
The source URL or path of the image.
​
alt
string
required
Alternative text for the image. Required for accessibility — always provide a meaningful description.
​
options
object
Style options. Supports classes, style, disableDefaultClass, and customAttributes.
  • classes — additional CSS class names
  • style — inline styles compiled to a goober atomic class
  • customAttributes — arbitrary HTML attributes merged into the element (e.g. data-*, aria-*)
​
id
string
Element id. Auto-generated if omitted.
​
otherProps
object
Additional HTML attributes such as width, height, loading, decoding, srcset, or sizes.
Returns: string — the rendered <img /> HTML.

​
Examples

​
Basic image

import { DOMMedia } from "@anikitenko/fdo-sdk";

const media = new DOMMedia();

const img = media.createImage("/assets/logo.png", "Company Logo");

​
Image with dimensions and lazy loading

const media = new DOMMedia();

const img = media.createImage(
  "/assets/logo.png",
  "Company Logo",
  { classes: ["logo-image"] },
  undefined,
  { width: "200", height: "100", loading: "lazy" }
);

​
Image with custom style and id

const media = new DOMMedia();

const img = media.createImage(
  "/assets/hero.png",
  "Hero banner",
  {
    style: {
      borderRadius: "8px",
      maxWidth: "100%",
      display: "block",
    },
  },
  "hero-img"
);

​
Decorative image (empty alt text)

For purely decorative images that should be hidden from screen readers, pass an empty string as alt: 
const media = new DOMMedia();

const divider = media.createImage("/assets/divider-line.svg", "");

​
Image with data-* attributes via customAttributes

const media = new DOMMedia();

const img = media.createImage(
  "/assets/screenshot.png",
  "Plugin screenshot",
  {
    customAttributes: {
      "data-lightbox": "gallery",
      "data-caption": "Plugin UI screenshot",
    },
  }
);

​
Responsive image with srcset

const media = new DOMMedia();

const img = media.createImage(
  "/assets/photo.jpg",
  "Team photo",
  {},
  "team-photo",
  {
    srcset: "/assets/photo-2x.jpg 2x, /assets/photo-3x.jpg 3x",
    width: "400",
    height: "300",
    decoding: "async",
  }
);

​
Full composition example

import { DOMMedia, DOMText, DOMSemantic } from "@anikitenko/fdo-sdk";

const media    = new DOMMedia();
const text     = new DOMText();
const semantic = new DOMSemantic();

const logo = media.createImage(
  "/assets/logo.png",
  "Company Logo",
  { classes: ["logo-image"] },
  undefined,
  { width: "200", height: "100", loading: "lazy" }
);

const view = semantic.createMain([
  semantic.createHeader([
    logo,
    text.createHText(1, "Welcome to FDO SDK"),
  ]),
  text.createPText("This is my plugin UI."),
]);
Always provide a descriptive alt value. FDO plugins run inside an iframe and must follow accessibility best practices. Screen readers rely on alt text to convey image content to users.