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

Version:

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

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

JSS NextImageコンポーネントは、Sitecoreフィールドで設定されたイメージをNext.js Imageコンポーネントと共に表示するために使用するフィールドレンダリングヘルパーコンポーネントです。

JSS NextImageコンポーネントは、srcプロパティをnext/imageコンポーネントに渡すカスタム・ローダーを使用しますが、必要に応じてloaderプロパティーを使用して独自のローダーを提供できます。

画像のサイズを変更するために、コンポーネントは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	/-/jssmediaまたは /~/jssmediaで置き換えるメディアURLプレフィックスを検索する正規表現。
imageParams	ImageSizeParameters	画像のURLに追加するクエリ文字列パラメーター。

前の表に示したプロパティに加えて、NextImageコンポーネントは、Next.js Imageコンポーネントのすべてのプロパティをサポートします。ただし、src。

手記

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

例

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

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

<NextImage field={props.fields.image} height="51" width="204" />

次の例は、サイズ変更と編集を制御する編集不可能な画像を表示する方法を示しています。

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

この例では、次のようになります。

editable - Sitecore Experience EditorまたはHorizonで画像を編集できるかどうかを制御します。
unoptimized - next/imageソースの最適化を無効にし、imageParamsを優先します。
imageParams - イメージサーバーサイドのサイズを変更するためにSitecoreに渡されるイメージサイジングパラメーター。

大事な

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

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