---
title: "JSSアプリケーションで画像を使う"
slug: "use-images-in-jss-applications"
abstract: "JSSアプリでの画像の使い方の概要"
---
# JSSアプリケーションで画像を使う

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

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

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

<Image />コンポーネントを使う際には、SitecoreメディアURLに付随する画像imageParamsを指定し、サイズ調整など様々な画像要素に影響を与えることができます。

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

1.  /sitecore/<app-name>.configファイルで、[Sitecoreメディアハンドラーを画像サイズパラメータのホワイトリストに設定します](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/media-handler.html "Media Handler")。
    
2.  画像のサイズパラメータは<Image/>コンポーネントのimageParamsプロパティで指定します。例えば:
    
    <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メディアハンドラーで画像のサイズパラメータをホワイトリスト化](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/media-handler.html "Media Handler")していなければ、設定してください。
    
2.  srcSetSitecoreリサイズパラメータを指定し、<Image/>成分の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ドキュメントを参照してください。

-   [Sitecoreメディアライブラリを手動でCDNを使用するように設定](https://doc.sitecore.com/xp/en/developers/102/sitecore-experience-manager/manually-configure-the-sitecore-media-library-to-use-a-cdn.html)してください。
-   [SitecoreメディアライブラリCDN関連の設定参照](https://doc.sitecore.com/xp/en/developers/102/sitecore-experience-manager/sitecore-media-library-cdn-related-configuration-reference.html)。

JSS <Image/> コンポーネントを使って画像をレンダリングしたり、[JSS mediaApi](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-media-api.html "JSS Media API")を使って画像データを取得している限り、得られたメディアURLはJSSアプリで自動的に機能します。

## 画像の最適化

画像にSitecoreメディアライブラリを使用している場合は、[Sitecore Dianoga](https://github.com/kamsar/Dianoga)や[imgIX](https://www.imgix.com/)などのサードパーティツールを使って画像を最適化できます。