Image

The Image control provides your component a string value of the URL of an image hosted by Makeswift. Images are stored and managed by Makeswift and can be shared across pages in a site.

AnchorExamples

AnchorA simple image

In this example we register a simple Img component with its src prop controlled by an Image control.

import { ReactRuntime } from '@makeswift/runtime/react'
import { Image } from '@makeswift/runtime/controls'

function Img({ src }) {
  return <img src={src} />
}

ReactRuntime.registerComponent(Img, {
  type: 'image',
  label: 'Image',
  props: {
    src: Image(),
  },
})

AnchorUsing next/image

In this example, we change the format of the Image control to WithDimensions.

import { ReactRuntime } from '@makeswift/runtime/react'
import { Image } from '@makeswift/runtime/controls'
import NextImage from 'next/image'

function Img({ image }) {
  if (image == null) return <p>Please select an image</p>

  return (
    <NextImage src={image.url} width={image.dimensions.width} height={image.dimensions.height} />
  )
}

ReactRuntime.registerComponent(Img, {
  type: 'image',
  label: 'Image',
  props: {
    image: Image({ format: Image.Format.WithDimensions }),
  },
})

AnchorAPI

AnchorParameters

AnchorProvided value

By default, the Image control provides a string URL value to your component—or undefined if there's no value set or the image doesn't exist anymore.

To get dimensions from the Image control, use Image.Format.WithDimensions for the format parameter. This will change the type of the provided value to ImageWithDimensions:

AnchorTypes

type ImageWithDimensions = {
  url: string
  dimensions: {
    width: number
    height: number
  }
}