Image
Image.Image
Image
Represents an image on a board from a URL that points to that image.
The dimensions of the rendered image on the board depend on the original image.
When creating or updating an image item, you can define its dimensions in the following way:
- Set or update only
width. - Set or update only
height.
Based on the specified value, the image is scaled accordingly to keep its aspect ratio.
ℹ️ Note:
- It's possible to initially set
url, but at the moment it's not possible to update it. data:image/<image-file-format>;base64: data URLs andbase64-encoded images aren't supported./path/to/local-image.png: relative URL paths pointing to local assets aren't supported.
💡 As a workaround, use the REST API to upload a local image to Miro.
Example:
const image = await miro.board.createImage({
title: 'This is an image',
url: 'https://miro.com/blog/wp-content/uploads/2020/10/organize-their-Miro-boards-for-trainings-and-workshops.svg',
x: 0, // Default value: horizontal center of the board
y: 0, // Default value: vertical center of the board
width: 800, // Set either 'width', or 'height'
rotation: 0.0,
});
// Output the created item to the developer console
console.log(image);
Image item:
Figure 1. Image item.
Table of contents
Properties
- type
- x
- y
- rotation
- width
- height
- title
- url
- id
- origin
- parentId
- createdAt
- createdBy
- modifiedAt
- modifiedBy
Methods
Properties
type
• Readonly type: "image"
Defines the type of item.
Item type is useful to retrieve specific items from a board.
For example, you can fetch all card and shape items from the board, and then carry out an action on them.
Example:
// Get all items from the board
const items = await miro.board.get();
// Count all card and shape items on the board
let cards = 0;
let shapes = 0;
items.forEach((items) => {
switch (items.type) {
case 'card':
cards++;
case 'shape':
shapes++;
}
});
// Output to the console the total amount of card and shape items
console.log('The current board has ${cards} cards and ${shapes} shapes.');
Overrides
x
• x: number
The x-axis coordinate of an item is the horizontal distance in dp of the center point of the item from the center point of the board.
The center point of the board has x: 0 and y: 0 coordinates.
Default: 0
See also:
Overrides
y
• y: number
The y-axis coordinate of an item is the vertical distance in dp of the center point of the item from the center point of the board.
The center point of the board has x: 0 and y: 0 coordinates.
Default: 0
See also:
Overrides
rotation
• rotation: number
Rotation angle of an item in degrees, relative to the board.
You can rotate items clockwise (right) and counterclockwise (left) by specifying positive and negative values, respectively.
The rotation property doesn't perform a rotation action on an item; it assigns the item a rotation angle.
Invoking the same rotation value multiple times on an item re-applies the same value; it doesn't result in multiple rotations of the item.
See also:
width
• Readonly width: number
Width of the item in dp.
See also:
height
• Readonly height: number
Height of the item in dp.
See also:
title
• title: string = ''
A short text header for the image.
The text must be shorter than 6000 characters.
title supports only plain text.
url
• Readonly url: string
A valid URL pointing to an image available online:
- The image URL must be publicly available.
- The image URL must be absolute.
Example:
- Supported:
https://amazing-images.com/categories/cats/cute-fluffy-kitten.png - Not supported:
/cats/cute-fluffy-kitten.png
Possible transport protocols:
- HTTP
- HTTPS
Possible image file formats:
- BMP
- GIF
- JPG, JPEG
- PNG
- PSD
- SVG
ℹ️ Note:
- It's possible to initially set
url, but at the moment it's not possible to update it. data:image/<image-file-format>;base64: data URLs andbase64-encoded images aren't supported./path/to/local-image.png: relative URL paths pointing to local assets aren't supported.
💡 As a workaround, use the REST API to upload a local image to Miro.
id
• Readonly id: string
origin
• origin: "center"
origin marks:
- The positioning reference point of a board item.
This is the point used to calculate thexandycoordinates of an item when it's positioned on the board, or when it's a child inside a parent item. - The rotation pivot point of a board item that supports rotation.
origin accepts only one value: center.
Any other value throws an error.
parentId
• Readonly parentId: null | string
If an item is a child of another item, the child's parentId returns the unique identifier of the corresponding parent item.
If an item has no parent, its parentId is null.
You can use the value to retrieve a tree structure when items are nested inside containers.
For example, sticky notes inside frames.
createdAt
• Readonly createdAt: string
Timestamp
Date and time when the item was created.
Format: UTC, ISO 8601.
Includes a trailing Z offset.
Example: 2021-05-18T07:59:01Z
createdBy
• Readonly createdBy: string
Miro users are automatically assigned a unique ID.
createdBy contains the ID of the user who created the item.
Example: 3658432978520043388
modifiedAt
• Readonly modifiedAt: string
Timestamp
Date and time when the item was last modified.
Format: UTC, ISO 8601.
Includes a trailing Z offset.
Example: 2021-05-18T07:59:01Z
modifiedBy
• Readonly modifiedBy: string
Miro users are automatically assigned a unique ID.
modifiedBy contains the ID of the user who applied the most recent edit to the item.
Example: 3658432978520043388
Methods
sync
▸ sync(): Promise<void>
sync propagates to the board any changes to item and tag properties.
After updating the properties of an item or a tag, sync it with the board to:
- Propagate to the board the changes applied to the item or to the tag.
- Make the changes visible on the board.
All board items and tags require sync to make any changes to their properties visible on the board.
For more information and examples, see Update and sync item properties.
Returns
Promise<void>
Updated 4 months ago