【Next.js】Imageコンポーネント サイズ不明画像での記述法

Next.jsのImageコンポーネントで画像の表示サイズ調整に手こずったので解決法をまとめました。

環境

  • Next.js @12.3.1
  • React @18.2.0

Imageコンポーネントの使い方

Next.jsでは、画像を表示する際に、imgタグでなくサーバーサイドで画像の最適化をしてくれるImageコンポーネントを使うことが推奨されています。

ESLintでも、imgタグを使っていようものなら以下のように忠告を出してくれます。

Do not use `<img>` element. Use `<Image />` from `next/image` instead. 
See: https://nextjs.org/docs/messages/no-img-element

Imageコンポーネントの公式のドキュメントはこちらです。

next/image | Next.js
Enable Image Optimization with the built-in Image component.

Imageコンポーネントを使用する場合は、以下の通り、layout=”fill” の場合を除いては、widthとheightの設定が必須となっています。

The width property is required, except for statically imported images, or those with layout="fill".

The height property is required, except for statically imported images, or those with layout="fill".

そのため、一般的には、以下のように記述して使用します。

<Image
  alt="アイコン"
  src="https://xxx/icon.png"
  width={600}
  height={400}
/>

が、しかーし、画像サイズが、こんなふうに決まっていれば良いですが、画像投稿アプリではそうはいきませんよね!

いろんなサイズの画像が投稿できるようになってほしいです。

ちなみに、上記の記述でこのアスペクト比でない画像を投稿すると比率がおかしくなってしまいます。

ではどうすればよいのか?

以下のように、widthとheight無しで指定します。

<Image
  alt="アイコン"
  src="https://xxx/icon.png"
  layout="fill"
  objectFit="contain"
/>

こうすることで、元の画像のアスペクト比のまま表示することができます。

が、しかーし、ここでもまた問題です。

この方法だと、画面いっぱいに表示されてしまいます。

これを解消しましょう!

サイズ不明の画像を表示する

Imageコンポーネントは上記の通りに記述すればよいです。

そこに一手間加え、このImageコンポーネントをdivタグで囲い、position: relative CSSを当ててあげる必要があります。

ここでは、3つの方法をご紹介します。

  • CSSを記述する
  • styleを指定する
  • tailwidCSSを使っている場合の記述法

Home.module.cssに記載する方法

CSSを記述する方法についてです。

next-crate-app でプロジェクトを作成した場合に、デフォルトで生成されているHome.module.cssにCSSを記述し、それをpostのファイルで呼び出します。

import styles from "../../styles/Home.module.css";

〜 省略 〜

<div className={styles.image_container}>
  <Image
    alt="アイコン"
    src="https://xxx/icon.png"
    layout="fill"
    objectFit="contain"
  />
</div>

.image_container {
  position: relative;
  max-width: 100%;
  height: 400px;
}

divタグにstyle指定する場合

divタグにstyleを直接記述する方法についてです。

<div style={{ position: "relative", maxWidth: "100%", height: "400px" }}>
  <Image
    alt="アイコン"
    src="https://xxx/icon.png"
    layout="fill"
    objectFit="contain"
  />
</div>

1ファイルで完結するのでこの方が楽ですね。

styleの指定方法は他にもたくさんあり、以下記事にまとめていますので見てみてください。

tailwindCSSを使った方法

個人的に最近もっぱらよく使う、cssを簡単に当てられるフレームワークtailwindCSSでの記述方法も記載しておきます。

<div className="relative max-w-full h-96">
  <Image
    alt="アイコン"
    src="https://xxx/icon.png"
    layout="fill"
    objectFit="contain"
  />
</div>

CSSフレームワークはいろんなものがありますが、その中でもtailwindCSSは一番勢いがあります。(ご参考までに)

Next.jsでのtailwindCSSのinstall方法はこちらにまとめていますのでご覧ください

以上、お読みいただきありがとうございました。

コメント