JSS アプリケーションでの画像の使用

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

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

フレームワーク固有の SDK によって提供される <Image/> コンポーネントを使用して、JSS アプリケーションで画像を表示できます。画像は、他の JSS コンポーネントと同様に、親コンポーネントプロパティ props に提供されるフィールド データから属性を取得します。

すべてのサンプル アプリケーションには、/sitecore/<app-name>.config で検査できる画像のサイズ変更パラメーターをホワイトリストに登録するための設定例が付属しています。ここで、<app-name> は config オプションの package.json ファイルで設定されているアプリケーションの名前を表します。ほとんどの場合、アプリケーションに追加の画像サイズが必要になります。

メディア URL のクエリ パラメーターを指定する

<Image /> コンポーネントを使用する場合は、Sitecore メディア URL に添付し、サイズ変更などのさまざまな画像の側面に影響を与える imageParams を指定できます。

JSS アプリケーションでレンダリングされる画像のクエリ パラメーターを指定するには:

  1. /sitecore/<app-name>.config ファイルで、Sitecore メディア ハンドラーが画像のサイズ設定パラメーターをホワイトリストに登録するように設定します。

  2. <Image/> コンポーネントの imageParams プロパティに、画像のサイズ設定パラメーターを指定します。例:

    RequestResponse
    <Image
  field={props.fields.sample2}
  editable={false}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"
  data-sample="other-attributes-pass-through"
/>

レスポンシブ画像をレンダリングする

サーバー側のサイズ変更でレスポンシブ画像をレンダリングするには、<Image/> コンポーネントの srcSet プロパティと sizes プロパティを使用します。これらのプロパティを定義すると、画像の HTML 要素に srcset 属性と sizes 属性が設定されます。

レンダリングされた画像に srcset 属性と sizes 属性を設定するには:

  1. まだ行っていない場合は、/sitecore/<app-name>.config ファイルで、 Sitecore メディア ハンドラーが画像サイズ設定パラメーターをホワイトリストに登録するように設定します。

  2. <Image/> コンポーネントの srcSet プロパティと sizes プロパティに、w、h、mw、mh などの Sitecore サイズ変更パラメーターを指定します。例:

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

Content Delivery Network から画像を提供する

メディア ライブラリ アセットに Content Delivery Network (CDN) を使用する機能は、core Sitecore 機能の一部であるため、この設定は JSS 固有ではありません。セットアップ手順については、公式の Sitecore CDN ドキュメントを参照してください。

生成されるメディア URL は、JSS <Image/> コンポーネントを使用して画像をレンダリングするか、JSS mediaApi を使用して画像データをフェッチする限り、JSS アプリで自動的に機能します。

画像を最適化する

画像に Sitecore Media Library を使用している場合は、Sitecore Dianogaや imgIX などのサードパーティ 製ツールを使用して画像を最適化できます。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、