The image size parameters
When using the JSS NextImage or Imagecomponents provided by JSS for React, Angular, Vue.js and React Native applications, you can provide the image resizing parameters to the components.
Some of the image size parameters affect image aspects, such as sizing. Others apply to any media type, such as language, version, database, and cache functionality.
They are used to set the srcset attribute on the HTML img element or appended to the image source URL as query string parameters.
Because JSS does not support security hashing of media URLs, you must white-list these parameter sets on the server.
The following table describes the supported parameters:
|
Key |
Description |
|---|---|
|
|
Width in pixels. |
|
|
Height in pixels. |
|
|
Maximum width in pixels. |
|
|
Maximum height in pixels. |
|
|
Language (defaults to context language). |
|
|
Version (defaults to the latest version). |
|
|
Database name (defaults to context database). |
|
|
Background color (defaults to black). |
|
|
Allow stretch (as=1). |
|
|
Scale by floating point number (sc=.25 = 25%). |
|
|
Thumbnail (thn=1). |
|
|
Disable media caching, both retrieval and storage (dmc=1). |
Examples
The following examples show how you can use the imageParams property for various frameworks.
React and Next.js
In a JSS React/Next.js application, with the Image component.
<Image
field={props.fields.sample2}
srcSet={[{ mw: 300 }, { mw: 100 }]}
sizes="(min-width: 960px) 300px, 100px"
className="img-fluid"
/>In a JSS Next.js application, you can also use the NextImage component. If you want to provide image size parameters, you must also set the unoptimized property to true. For example:
<NextImage
field={props.fields.image}
unoptimized={true}
imageParams={{ mw: 100, mh: 50 }}
height="50"
width="94"/>Vue.js
In a JSS Vue.js application:
<sc-image
:media="fields.sample2"
:srcSet="[{ mw: 300 }, { mw: 100 }]"
sizes="(min-width: 960px) 300px, 100px"
class="img-fluid"
/>Angular
In a JSS Angular application, you can use the parameters to set the srcset attribute on the image:
<img *scImage="rendering.fields.sample2; attrs: srcSetImageAttributes"
sizes="(min-width: 960px) 300px, 100px"
class="img-fluid" />where the structure of the srcSetImageAttributes object is:
srcSetImageAttributes = {
srcSet: [
{ mw: 300 },
{ mw: 100 }
]
};You can also use the image size parameters as URL parameters that append to the media URL:
<img *scImage="rendering.fields.sample2; editable: false; urlParams: scaledImageParams"
height="50"
width="94" />where the structure of the scaledImageParams object is:
scaledImageParams = {
mw: 100,
mh: 50,
};