JSSアプリケーションで画像を使う
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
フレームワーク固有のSDKが提供する コンポーネントを使って、JSSアプリケーション内で画像を表示できます。画像は他のJSSコンポーネントと同様に、提供されたフィールドデータから親コンポーネントプロパティpropsの属性を取ります。
すべてのサンプルアプリケーションには、画像リサイズパラメータのホワイトリスト化設定が付属しており、/sitecore/
メディアURLのクエリパラメータを指定します
コンポーネントを使う際には、SitecoreメディアURLに付随する画像imageParamsを指定し、サイズ調整など様々な画像要素に影響を与えることができます。
JSSアプリケーションでレンダリングされた画像のクエリパラメータを指定するには:
-
/sitecore/
.configファイルで、Sitecoreメディアハンドラーを画像サイズパラメータのホワイトリストに設定します。 -
画像のサイズパラメータはコンポーネントのimageParamsプロパティで指定します。例えば:
<Image field={props.fields.sample2} editable={false} imageParams={{ mw: 100, mh: 50 }} height="50" width="94" data-sample="other-attributes-pass-through" />
レスポンシブな画像をレンダリングする
サーバー側のリサイズでレスポンシブ画像をレンダリングするには、コンポーネントのsrcSetプロパティとsizesプロパティを利用できます。これらのプロパティを定義すると、画像HTML要素の属性srcsetとsizes属性が設定されます。
レンダリング画像のsrcsetとsizes属性を設定するには:
-
/sitecore/
.configファイルで、Sitecoreメディアハンドラーで画像のサイズパラメータをホワイトリスト化していなければ、設定してください。 -
srcSetSitecoreリサイズパラメータを指定し、成分のsizesプロパティ(w、h、mw、mhなど)を指定します。例えば:
<Image field={props.fields.sample2} srcSet={{ mw: 300 }, { mw: 100 }} sizes="(min-width: 960px) 300px, 100px" className="img-fluid" />
コンテンツ配信ネットワークからの画像を配信する
メディアライブラリ資産のコンテンツ配信ネットワーク(CDN)を利用できる機能はSitecoreのコア機能の一部なので、設定はJSSに限定されません。設定手順については公式Sitecore CDNドキュメントを参照してください。
JSS コンポーネントを使って画像をレンダリングしたり、JSS mediaApiを使って画像データを取得している限り、得られたメディアURLはJSSアプリで自動的に機能します。
画像の最適化
画像にSitecoreメディアライブラリを使用している場合は、Sitecore DianogaやimgIXなどのサードパーティツールを使って画像を最適化できます。