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

Version:

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

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

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

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

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

手記

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エクスペリエンスエディターで画像を編集できるかどうかを制御します。
unoptimized - next/imageソースの最適化を無効にし、imageParamsを優先します。
imageParams - イメージサーバーサイドのサイズを変更するためにSitecoreに渡されるイメージサイジングパラメーター。

大事な

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

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