Use images in JSS applications

Version: 19.x

You can display images in your JSS applications using the <Image/> components provided by framework-specific SDKs. Images take their attributes, like other JSS components, from the field data provided to the parent component properties props.

All the sample applications come with an example configuration for whitelisting image resizing parameters that you can inspect in /sitecore/<app-name>.config, where <app-name> stands for the name of the application, as configured in the package.json file, in the config options. In most cases, you will require additional image sizes for your application.

Specify query parameters for the media URL

When using the <Image /> component you can specify imageParams that attach to Sitecore media URLs and affect various image aspects, such as sizing.

To specify query parameters for images rendered in your JSS application:

  1. In the /sitecore/<app-name>.config file, configure the Sitecore Media Handler to whitelist image sizing parameters.

  2. Specify the image sizing parameters in the imageParams property of the <Image/> component. For example:

    RequestResponse
    <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.

To set the srcset and sizes attributes on the rendered image:

  1. In the /sitecore/<app-name>.config file, configure the Sitecore Media Handler to whitelist image sizing parameters if you have not already done so.

  2. Specify Sitecore resizing parameters in the srcSet and sizes properties on the <Image/> component, such as w, h, mw, mh. For example:

    RequestResponse
    <Image
  field={props.fields.sample2}
  srcSet={[{ mw: 300 }, { mw: 100 }]}
  sizes="(min-width: 960px) 300px, 100px"
  className="img-fluid"
/>

Serve images from a content delivery network

The ability to use a content delivery network (CDN) for Media Library Assets is part of core Sitecore functionality, so setting this up is not JSS-specific. Refer to the official Sitecore CDN docs for setup instructions:

The resulting media URLs automatically work in JSS apps as long as you are rending images using the JSS <Image/> component or fetching image data using the JSS mediaApi.

Optimize images

If you are using the Sitecore Media Library for images, you can use third-party tools to optimize images, such as Sitecore Dianoga or imgIX.

Do you have some feedback for us?

If you have suggestions for improving this article,