The Content SDK Image component
You can display images in your Content SDK applications using the Image component provided by the starter template. If you're developing with Next.js, you can choose to use the NextImage component instead.
Specify query parameters for the media URL
When using the Image component, you can use the imageParams property to attach parameters to SitecoreAI media URLs that alter aspects of the image such as its size.
In the following example, the imageParams property contains, among other things, the height and width parameters required to specify the size of the rendered image.
<Image field={props.fields.sample2} editable={false} imageParams={{ mw: 100, mh: 50 }} height="50" width="94" data-sample="other-attributes-pass-through"/>Render a responsive image
To render a responsive image with server-side resizing, you can use the srcSet and sizes properties of the Image component. Defining these properties sets the srcset and sizes attributes on the image HTML element.
Within srcSet and sizes, you can define properties such as w, h, mw, mh, and so on, as shown in the following example:
<Image field={props.fields.sample2} srcSet={[{ mw: 300 }, { mw: 100 }]} sizes="(min-width: 960px) 300px, 100px" className="img-fluid"/>