1. JSS NextImageコンポーネント

JSS NextImageコンポーネントの設定

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JSS NextImageコンポーネントは、SitecoreフィールドでNext.js画像コンポーネントで設定された画像を表示するためのフィールドレンダリングヘルパーコンポーネントです。

JSS NextImageコンポーネントはVercelが提供する組み込みの画像最適化を使用していますが、必要に応じてloaderプロパティを活用して独自のローダーを用意することも可能です。21.6.1以前のJSSバージョンでは、NextImageコンポーネントはカスタムローダーを使用しています。

このコンポーネントはJSS Media APIとHeadless Servicesメディアハンドラ を使って画像のサイズを調整します。

!注NextImageコンポーネントを使用するには、@sitecore-jss/sitecore-jss-nextjsバージョン20.1.0以降にアップデートする必要があります。

以下の表は、NextImageコンポーネントの設定に使用できるプロパティを示しています:

名称

種類

概要

field

ImageField | ImageFieldValue

必須。

画像フィールドデータ。データは Placeholder コンポーネントによって提供されます。

editable

boolean

Sitecore形式の出力を使用する必要があるかどうかを示します。

デフォルト: true。

mediaUrlPrefix

RegExp

メディアURLの接頭辞を /-/jssmedia または /~/jssmediaに置き換える正規表現です。

imageParams

ImageSizeParameters

画像URLに付 加するクエリ文字列パラメータ 。

前の表に挙げたプロパティに加え、NextImageコンポーネントはNext.js画像コンポーネントのすべてのプロパティ をサポートしていますが、srcを除きます。

!注srcプロパティを追加すると、コンポーネントからエラーが発生します。 srcプロパティを通じて画像ソースURLを直接提供するには、next/imageコンポーネントを使用する必要があります。

例

NextImageコンポーネントを使って、編集可能または編集不可のレスポンシブ画像を表示できます。

単純な画像

以下の例は、レスポンシブで最適化され、編集可能な画像を表示する方法を示しています。

画像サイズパラメータを持つ高度な画像

以下の例は、リサイズと編集をコントロールできる編集不可画像の表示方法を示しています:

<NextImage   field={props.fields.image}   editable={false}   unoptimized={true}   imageParams={{ mw: 100, mh: 50 }}   height="50"   width="94"/>

この例では:

  • editable - 画像がSitecoreエクスペリエンスエディターで編集できるかどうかを制御します。

  • unoptimized- ソース最適化next/image無効化し、代わりにimageParams

  • imageParams - 画像 のサイズパラメータ をサーバー側で画像のサイズ変更のためにSitecoreに渡します。

    !重要JSSはメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメータセットはサーバー上でホワイトリスト化する必要があります。

この記事を改善するための提案がある場合は、 お知らせください!