Images

You can easily insert an image using either a public or a data URL:

TypeScript

function createImage(page:PageProxy, x:number, y:number) {
    page.addImage({
        boundingBox:{
            x, y, w:150, h:150
        },
        fillStyle: {
            url: 'https://cdn-cashy-static-assets.lucidchart.com/marketing/images/LucidSoftwareFavicon.png',
            position: SimpleImageFillPosition.Fill,
        },
    });
}

Keep in mind that images are just blocks, and they can be handled as such.
We provide a few wrapper methods, such as addImage, that abstract away some block information that is less frequently used for images, but note that an image can be modified just as a block could be.

📘

The block class that is used in our helper methods is UserImage2Block. Although, any block class will work to display images, so long as the fill color is set to the image.

You can also upload images utilizing file uploads. To do this, you can upload a picture and then process it into a data URL. You can then call the createUserImage method from the EditorClient class and pass in the media type (png, jpeg, etc.) and the binary image contents:

TypeScript

function uploadImage(files: FileUploadData[]) {
    const img = files[0];

    const url = await client.createUserImage("image/jpeg", img.binary);

    page.addImage({
        boundingBox:{
            x, y, w:150, h:150
        },
        fillStyle: {
            url: url,
            position: SimpleImageFillPosition.Fill,
        },
    });

}