Image extension
Use this extension to render <img> HTML tags. By default, those images are blocks. If you want to render images in line with text set the inline option to true.
No Server Functionality
This extension is only responsible for displaying images. It doesn’t upload images to your server, for that you can integrate the FileHandler extension
Install
npm install @tiptap/extension-image
Settings
inline
Renders the image node inline, for example in a paragraph tag: <p><img src="spacer.gif"></p>. By default images are on the same level as paragraphs.
It totally depends on what kind of editing experience you’d like to have, but can be useful if you (for example) migrate from Quill to Tiptap.
Default: false
Image.configure({
inline: true,
})
allowBase64
Allow images to be parsed as base64 strings <img src="data:image/jpg;base64...">.
Default: false
Image.configure({
allowBase64: true,
})
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
Image.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
Commands
setImage()
Makes the current node an image.
editor.commands.setImage({ src: 'https://example.com/foobar.png' })
editor.commands.setImage({
src: 'https://example.com/foobar.png',
alt: 'A boring example image',
title: 'An example',
})