Code component that displays image with transformations?

Developer Support
1

I wan to create a code component that displays an image from the user, with some additional transformations. I’ve managed to do this, but it’s not satisfactory:

PLASMIC.registerComponent(MyImage, {
  name: "My image",
  props: {
    imageUrl: 'imageUrl',
    alt: 'string',
    title: 'string',
    imgHeight: 'number',
    imgWidth: 'number',
  }
});

(--------------)

interface MyImageProps {
    className: string,
    imageUrl?: string,
    alt?: string,
    title?: string,
    imgHeight: number,
    imgWidth: number,
}

export function MyImage({ className,
                          imageUrl,
                          alt,
                          title,
                          imgHeight,
                          imgWidth }: MyImageProps) {

    /* eslint-disable @next/next/no-img-element */
    return  <div className={ className }>
               <div className="MyClassToDoThings">
                    <img src={ image || "" }
                         alt={ alt || "" }
                         title={ title || "" }
                         width={ imgWidth || ""}
                         height={ imgHeight || ""} />
               </div>
            </div>
}
2

I wanted to pass the complete image object, and use one of the nextjs Image component, in order to use the features like having a srcset with different image sizes, and so on

3

wonder if it would be possible

4

Hi! Indeed the imageUrl prop type currently only gives you the url. It’s a good idea to support a more general image prop type that also gives you some metadata, like the image width/height :thinking_face: