🖼️

next/imageでサイズがわからない画像をいい感じに表示できるコンポーネントを作った

2022/11/25に公開

Next.js

TypeScript

tech

はじめに

next/imageで表示する画像の幅や高さが可変のときや親要素に合わせたいときに、その都度 <Image /> の props を設定したり CSS でいろいろ書いたりするのが面倒だったので、コンポーネント化してみました。

環境

Next.js 13.0.2
next/imageはv13からlayout, objectFit, objectPosition, lazyBoundary, lazyRoot props が取り除かれました。
しかし、CSS から object-fit などは指定できました。

作成したコンポーネント

NextImage.tsx

import Image from "next/image";
import { FC } from "react";
import styles from "@/styles/components/NextImage.module.scss";

type NextImageProps = {
  src: string;
  alt: string;
};


export const NextImage: FC<NextImageProps> = ({ src, alt }) => {
  return (
    <div className={styles.container}>
      <Image src={src} alt={alt} fill sizes="100vw" className={styles.image} />
    </div>
  );
};

NextImage.module.scss

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.image {
  object-fit: cover;
}

<Image /> にはfill を指定します。これにより、width と height を指定しなくても画像が親要素を埋めるように表示してくれます。
このとき、CSS で object-fit: cover を指定すると、画像を余白なしでトリミングして表示できます。
親要素の div では width と height を 100% にします。これでコンポーネントを使う側から自由に幅や高さを指定することができます。
また、<Image /> で fill を指定したときは、親要素に対して position を指定しなければなりません。

コンポーネントを使う

Sample.tsx

<div className={styles.imageContainer}>
  <NextImage src={"srcを渡す"} alt={"altを渡す"}　/>
</div>

コンポーネントを使う際は div タグなどで囲い、その要素に対して幅や高さを指定すれば、画像がそのサイズに合わせて表示されます。
これにより、画像サイズが可変の場合でも良い感じで表示できます。

border-radiusなどで画像の形を変えたいとき

border-radius: 50% で画像の形を丸くしたいときなどは、border-radius を指定した要素に対して over-flow: hidden を指定すれば大丈夫だと思います。