DraggableImage
The DraggableImage
component has been deprecated. Instead, use the ImageCard
(opens in a new tab or window) 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",aiDisclosure: "none",});}}/>);}
Props
src
string
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"
.
resolveImageRef
function
A function that returns the result of the upload
method.
fullSize
object
The dimensions of the full-size image, in pixels.
fullSize.width
number
The width of the full-size image, in pixels.
fullSize.height
number
The height of the full-size image, in pixels.
previewSrc
string
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"
.
previewSize
object
The dimensions of the drag preview, in pixels.
previewSize.width
number
The width of the drag preview, in pixels.
previewSize.height
number
The height of the drag preview, in pixels.