画像サイズパラメータ

Version:

日本語翻訳に関する免責事項

このページの翻訳は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プロパティを使用する方法を示しています。

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"/>

JSS Vue.jsアプリケーションの場合:

<sc-image
  :media="fields.sample2"
  :srcSet="[{ mw: 300 }, { mw: 100 }]"
  sizes="(min-width: 960px) 300px, 100px"
  class="img-fluid"
/>

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,
 };

この記事を改善するための提案がある場合は、お知らせください!