---
title: "Use images in JSS applications"
slug: "use-images-in-jss-applications"
abstract: "Overview of how to use images in JSS apps"
---
# Use images in JSS applications

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.

> [!note]
> If you are developing a Next.js application, you can use [the `NextImage` component](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/configuring-the-jss-nextimage-component.html "Configuring the JSS 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 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](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/en/media-handler.html).
2. Specify the image sizing parameters in the `imageParams` property of the `<Image/>` component. For example:

    ```tsx
    <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](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/en/media-handler.html) 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:

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