DraggableImage
API reference for the DraggableImage component.
Usage
import React from "react";import { DraggableImage } from "components/draggable_image";import { upload } from "@canva/asset";export function App() {return (<DraggableImagesrc="https://www.canva.dev/example-assets/image-import/thumbnail.jpg"resolveImageRef={() => {return upload({type: "IMAGE",mimeType: "image/jpeg",url: "https://www.canva.dev/example-assets/image-import/image.jpg",thumbnailUrl:"https://www.canva.dev/example-assets/image-import/thumbnail.jpg",});}}/>);}
tsx
Props
Required
The URL or data URL of the image to embed in the app's user interface.
This image must have a MIME type of "image/jpeg"
or "image/png"
.
Optional
The dimensions of the full-size image, in pixels.
Sometimes required
The width of the full-size image, in pixels.
Sometimes required
The height of the full-size image, in pixels.
Optional
The data URL of the image used in the drag preview. This is the image that appears under the user's cursor during the drag event. If omitted, the image from the src
prop is used.
This image must have a MIME type of "image/jpeg"
or "image/png"
.
Optional
The dimensions of the drag preview, in pixels.
Sometimes required
The width of the drag preview, in pixels.
Sometimes required
The height of the drag preview, in pixels.