Insert and manage images with perfect Word compatibility. Supports URLs, base64 data, and maintains positioning for Word export.

​
OOXML Structure

<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>

​
Why you’d use this

  • 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
Usage: 
Image.configure({
  resizable: false,
  cellMinWidth: 50
})

​
Attributes

​
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
​
padding
Object
Image padding/margins
​
marginOffset
Object
Margin offset for anchored images
​
style
string
Custom inline CSS styles

​
Commands

​
setImage

Insert an image at the current position
Supports URLs, relative paths, and base64 data URIs
// Insert an image from a URL
setImage({ src: 'https://example.com/image.jpg' })

// Insert a base64 encoded image
setImage({
  src: 'data:image/png;base64,...',
  alt: 'Company logo',
  size: { width: 200 }
})
Parameters:
​
options
Object
required
Image attributes
​
options.src
string
required
Image source URL or data URI
​
options.alt
string
Alternative text
​
options.title
string
Image title
​
options.size
Object
Image dimensions

​
Helpers

​
uploadImage

Uploads an image and inserts it into the document 
await uploadImage({ editor, view, file, size, uploadHandler });
Parameters:
​
params
Object
required
Upload parameters
​
params.editor
Object
required
Editor instance
​
params.view
Object
required
Editor view
​
params.file
File
required
Processed image file
​
params.size
Object
required
Image dimensions
​
params.uploadHandler
function
required
Function to handle the upload
Returns: Promise.&lt;void&gt;