> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superdoc.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Image extension

Insert and manage images with perfect Word compatibility.

Supports URLs, base64 data, and maintains positioning for Word export.

## OOXML Structure

```xml theme={null}
<w:drawing>
  <wp:inline distT="0" distB="0" distL="0" distR="0">
    <wp:extent cx="5715000" cy="3810000"/>
    <wp:docPr id="1" name="Picture 1"/>
    <a:graphic>
      <a:graphicData>
        <pic:pic>
          <pic:blipFill>
            <a:blip r:embed="rId7"/>
          </pic:blipFill>
        </pic:pic>
      </a:graphicData>
    </a:graphic>
  </wp:inline>
</w:drawing>
```

## Use case

* **Document illustrations** - Add diagrams, charts, and screenshots
* **Product documentation** - Include product images and UI screenshots
* **Reports** - Embed data visualizations and infographics
* **Branding** - Insert logos and company graphics
* **Base64 support** - Embed images directly without external files

## Options

Configure the extension behavior:

**allowBase64** `boolean` (default: true)

Allow base64 encoded images

**htmlAttributes** `Object`

Default HTML attributes for image elements

## Attributes

Node attributes that can be set and retrieved:

**src** `string`

Image source URL or path

**alt** `string` (default: Uploaded picture)

Alternative text for accessibility

**title** `string`

Image title/tooltip text

**size** `Object`

Image dimensions

**size.width** `number`

Width in pixels

**size.height** `number`

Height in pixels

**padding** `Object`

Image padding/margins

**padding.left** `number`

Left padding in pixels

**padding.top** `number`

Top padding in pixels

**padding.bottom** `number`

Bottom padding in pixels

**padding.right** `number`

Right padding in pixels

**marginOffset** `Object`

Margin offset for anchored images

**marginOffset.horizontal** `number`

Left/right margin offset

**marginOffset.top** `number`

Top margin offset

**style** `string`

Custom inline CSS styles

**wrap** `Object` (default: \{ type: 'Inline' })

Text wrapping configuration. The `type` property controls wrapping mode (e.g., `'Inline'`, `'Square'`, `'Tight'`, `'TopAndBottom'`, `'None'`).

**transformData** `Object` (default: \{})

Transform data for rotation, flips, and size extension. Supports `rotation` (degrees), `flipH` (horizontal flip), `flipV` (vertical flip), and `sizeExtension` properties.

## Commands

### `setImage`

Insert an image at the current position

> [!NOTE]
>
> Supports URLs, relative paths, and base64 data URIs

**Example:**

```javascript Usage theme={null}
editor.commands.setImage({ src: 'https://example.com/image.jpg' })
editor.commands.setImage({
  src: 'data:image/png;base64,...',
  alt: 'Company logo',
  size: { width: 200 }
})
```

```javascript Full Example theme={null}
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setImage({ src: 'https://example.com/image.jpg' })
    editor.commands.setImage({
      src: 'data:image/png;base64,...',
      alt: 'Company logo',
      size: { width: 200 }
    })
  },
});
```

**Parameters:**

**options** `ImageInsertOptions` *required*

Image insertion options

### `setWrapping`

Set the wrapping mode and attributes for the selected image

**Example:**

```javascript Usage theme={null}
// No wrapping, behind document
editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })

// Square wrapping on both sides with distances
editor.commands.setWrapping({
  type: 'Square',
  attrs: {
    wrapText: 'bothSides',
    distTop: 10,
    distBottom: 10,
    distLeft: 10,
    distRight: 10
  }
})

// Tight wrapping with polygon
editor.commands.setWrapping({
  type: 'Tight',
  attrs: {
    polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
  }
})

// Top and bottom wrapping
editor.commands.setWrapping({
  type: 'TopAndBottom',
  attrs: {
    distTop: 15,
    distBottom: 15
  }
})
```

```javascript Full Example theme={null}
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // No wrapping, behind document
    editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })

    // Square wrapping on both sides with distances
    editor.commands.setWrapping({
      type: 'Square',
      attrs: {
        wrapText: 'bothSides',
        distTop: 10,
        distBottom: 10,
        distLeft: 10,
        distRight: 10
      }
    })

    // Tight wrapping with polygon
    editor.commands.setWrapping({
      type: 'Tight',
      attrs: {
        polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
      }
    })

    // Top and bottom wrapping
    editor.commands.setWrapping({
      type: 'TopAndBottom',
      attrs: {
        distTop: 15,
        distBottom: 15
      }
    })
  },
});
```

**Parameters:**

**options** `Object` *required*

Wrapping options

## Types

### `ImageInsertOptions`

Options for inserting an image

**Properties**

**src** `string` *required*

Image source URL or data URI

**alt** `string`

Alternative text

**title** `string`

Image title

**size** `Object`

Image dimensions

**size.width** `number`

Width in pixels

**size.height** `number`

Height in pixels

## Source code

[View on GitHub →](https://github.com/superdoc/docx-editor/tree/main/packages/super-editor/src/editors/v1/extensions/image/image.js)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.