🖼️

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

2022/11/25に公開

はじめに

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

環境

Next.js 13.0.2
next/imageはv13からlayoutobjectFitobjectPositionlazyBoundarylazyRoot 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 を指定します。これにより、widthheight を指定しなくても画像が親要素を埋めるように表示してくれます。
このとき、CSS で object-fit: cover を指定すると、画像を余白なしでトリミングして表示できます。
親要素の div では widthheight を 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 を指定すれば大丈夫だと思います。

参考記事

https://nextjs.org/docs/api-reference/next/image

Discussion