Image

Non-editable image block (image). Renders as <figure> (or image.tag) with <img>, optional link and caption. JSON data: { src, alt?, caption?, url?, target?, img?, ...common }.

Type: image · Class: ImageBlock

Access:

app.block.get()
app.blocks.findByEl(el)
app.blocks.create(type)

App code:

const block = app.block.get();

Plugin:

const block = this.app.block.get();

getLinkEl#

Returns the wrapping <a> element around the image, or null when the image has no link.

Returns: HTMLElement | null

block.getLinkEl();

getImageEl#

Returns the inner <img> element managed by this block.

Returns: HTMLElement

block.getImageEl();

getImageStyles#

Returns an object of inline CSS properties currently applied to the <img> element.

Returns: object

block.getImageStyles();

setImageStyles#

Applies inline CSS styles to the <img> element.

Parameters:

• styles (object) — CSS declarations ({ color: '#f00' } or { backgroundColor: 'yellow' })

Returns: void

block.setImageStyles({ width: '100%' });

getLinkInfo#

Returns link metadata (url, target, text, html) for the wrapping anchor, or an empty object when unlinked.

Returns: object

block.getLinkInfo();

hasLink#

Returns whether the image is wrapped in an anchor with a non-empty href.

Returns: boolean

block.hasLink();

setLink#

Wraps the image in an anchor or updates the existing link href and target.

Parameters:

• url (string) — target URL
• target (string) — scroll target selector or element

Returns: void

block.setLink('https://example.com', '_blank');

unwrapLink#

Removes the wrapping anchor while keeping the image in place.

Returns: void

block.unwrapLink();

getData#

Returns the serializable JSON data object for this block, including type-specific fields.

Returns: object

block.getData();

update#

Applies common fields, then updates the <img> attributes, dimensions, caption, link wrap, and optional image styles.

Parameters:

• data (object) — object with the keys below
  • src (string) — image URL
  • alt (string) — alt attribute
  • title (string) — title attribute
  • srcset (string) — srcset attribute
  • width / height (string) — dimension attributes (empty string removes them)
  • caption (string | null) — figcaption text; empty/null removes the caption
  • url (string) — wraps the image in an <a> (or updates href); empty unwraps
  • target (string) — link target when a link exists or is created with url
  • img (object) — image style payload: { styles: { … } } or a plain CSS property map
  • id, classname, styles, attrs, … — common block fields (see Common update)

Returns: void

block.update({ src: '/images/hero.jpg', alt: 'Hero' });

block.update({ width: '800', height: '450' });

block.update({ caption: 'Office exterior' });

block.update({ url: 'https://example.com', target: '_blank' });

block.update({ url: '' }); // remove link

block.update({
    img: { styles: { 'max-width': '100%', borderRadius: '8px' } }
});