画像サイズパラメータ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
React、Angular、Vue.js、React Nativeアプリケーション向けにJSSが提供するJSS NextImageまたはImageコンポーネントを使用する場合、画像リサイズパラメータをコンポーネントに設定できます。
一部の画像サイズパラメータはサイズ表示など、画像の側面に影響を与えます。その他は言語、バージョン、データベース、キャッシュ機能など、あらゆるメディアタイプに適用されます。
これらはHTML img要素のsrcset属性を設定するか、画像ソースURLにクエリ文字列パラメータとして付加するために使われます。
!重要JSSはメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメータセットはサーバー上でホワイトリスト化する必要があります。
以下の表は、サポートされるパラメータを示しています:
キー
概要
w
幅はピクセル単位です。
h
高さ(ピクセル単位)。
mw
最大幅はピクセル単位で。
mh
ピクセル単位の最大高さ。
la
言語(デフォルトは文脈言語です)。
vs
バージョン(デフォルトで最新バージョン)。
db
データベース名(デフォルトはコンテキストデータベース)。
bc
背景色(デフォルトは黒)。
as
伸縮(as=1)を許容します。
sc
浮動小数点数(sc=.25 = 25%)でスケールします。
thn
サムネイル(thn=1)。
dmc
メディアキャッシュ(取得と保存の両方)を無効にします(dmc=1)。
例
以下の例は、さまざまなフレームワークでimageParamsプロパティをどのように活用できるかを示しています。
ReactとNext.js
JSS React/Next.jsアプリケーションでは、Imageコンポーネントが使われています。
<Image field={props.fields.sample2} srcSet={{ mw: 300 }, { mw: 100 }} sizes="(min-width: 960px) 300px, 100px" className="img-fluid" />
JSS Next.jsアプリケーションでは、NextImageコンポーネントも使用できます。画像サイズパラメータを提供したい場合は、unoptimizedプロパティをtrueに設定する必要があります。例えば:
<NextImage field={props.fields.image} unoptimized={true} imageParams={{ mw: 100, mh: 50 }} height="50" width="94"/>
Vue.js
JSS Vue.js申請の場合:
角
JSS Angularアプリケーションでは、パラメータを使って画像のsrcset属性を設定できます:
<img *scImage="rendering.fields.sample2; attrs: srcSetImageAttributes" sizes="(min-width: 960px) 300px, 100px" class="img-fluid" />
ここで、srcSetImageAttributesオブジェクトの構造は次の通りです:
srcSetImageAttributes = { srcSet: { mw: 300 }, { mw: 100 } };
また、画像サイズパラメータをメディアURLに付加するURLパラメータとして使うこともできます:
<img *scImage="rendering.fields.sample2; editable: false; urlParams: scaledImageParams" height="50" width="94" />
ここで、scaledImageParamsオブジェクトの構造は次の通りです:
scaledImageParams = { mw: 100, mh: 50, };