JSSアプリケーションでのイメージの使用
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
フレームワーク固有のSDKによって提供される <Image/> コンポーネントを使用して、JSSアプリケーションでイメージを表示できます。イメージは、他のJSSコンポーネントと同様に、親コンポーネントのプロパティに提供されるフィールド データから属性を取得しますprops。
すべてのサンプル アプリケーションには、イメージのサイズ変更パラメーターをホワイトリストに登録するための設定例が付属しています。 /sitecore/<app-name>.configで検査できます。ここで、<app-name> は、package.jsonファイルで設定されたアプリケーションの名前を表し、configオプションで設定します。ほとんどの場合、アプリケーション用に追加の画像サイズが必要になります。
Next.jsアプリケーションを開発している場合は、代わりにNextImageコンポーネントを使用できます。
メディアURLのクエリ パラメーターを指定します
<Image />コンポーネントを使用すると、imageParamsプロパティを使用して、SitecoreメディアURLにパラメータをアタッチし、サイズ設定などの様々な画像の側面に影響を与えることができます。
JSSアプリケーションでレンダリングされる画像のクエリパラメータを指定するには、次のようにします。
-
/sitecore/<app-name>.configファイルで、Sitecore Media Handlerを設定して、画像のサイズ設定パラメータをホワイトリストに登録します。
-
<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属性を設定するには:
-
/sitecore/<app-name>.configファイルで、Sitecore Media Handlerをホワイトリスト設定して、画像サイズ設定パラメータをまだ設定していない場合は、ホワイトリストに登録します。
-
<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" />
コンテンツ配信ネットワークからの画像の提供
メディア ライブラリ アセットにコンテンツ配信ネットワーク (CDN) を使用することはSitecoreのコア機能の一部であるため、この設定はJSS固有ではありません。セットアップ手順については、公式のSitecore CDNドキュメントを参照してください。
結果のメディアURLは、JSS <Image/> コンポーネントを使用して画像をレンディングしているか、JSS mediaApiを使用して画像データを取得している限り、JSSアプリで自動的に機能します。
画像の最適化
画像にSitecore Media Libraryを使用している場合は、Sitecore DianogaやimgIXなどのサードパーティ ツールを使用して画像を最適化できます。