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

2022.10.16

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

2023年1月11日追記。Next.js 13のアップデートにより書き方が少し変わりましたのでその内容を最後に追記しました。

環境

  • 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コンポーネントの公式のドキュメントはこちらです。

Components: | Next.js
Optimize Images in your Next.js Application using the built-in `next/image` Component.
nextjs.org

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の指定方法は他にもたくさんあり、以下記事にまとめていますので見てみてください。

【React】CSSのいろんな当て方
Reactでは、いろんな方法でCSSを当てることができます。それら複数ある方法についてまとめた。まず前提知識として、React内にCSSを記述する場合は、CSS-in-JSと言われる、純粋なCSSとは異なる記法で記述します。...
almonta2021blog.com
2022.03.26

tailwindCSSを使った方法

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

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

※以下Next.js13での書き方について記述します。

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

“fill”と記述するだけでよく、よりシンプルに指定することができるようになりました。

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

【React】CSSフレームワーク
ReactでStyle簡単に当てられる便利なフレームワークをまとめました。Chakra UIMaterial UITailwind CSS...
almonta2021blog.com
2022.03.26

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

【Next.js】初期設定 src作成 tailwindCSS適用まで
Next.jsをcreate-next-appした素の状態で使おうとしていませんか？ちょっと待ってください！後々のことを考えると、最初に諸々の設定をした方がよく、その設定が結構厄介なため、手順をまとめることにしました。以下...
almonta2021blog.com
2022.12.10

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

コメント