【React】imageをディレクトリ単位で読み込みたい

研修中の開発備忘録です！

はじめに！

import React from "react";
import "./ImageIcon.css";
import "bootstrap/dist/css/bootstrap.min.css";

interface Image {
  default: string;
}

interface ImageIconProps {
  index: number;
  brightness: number;
}

// `require.context` の型定義
interface WebpackRequireContext {
  keys(): string[];
  <T>(id: string): T;
  resolve(id: string): string;
  id: string;
}
declare const require: {
  context(directory: string, useSubdirectories?: boolean, regExp?: RegExp): WebpackRequireContext;
};

• 型定義関連（typescriptあるある）

今回のメイン

const importAll = (r: WebpackRequireContext): Image[] => {
  const keys: string[] = r.keys();
  keys.sort(new Intl.Collator("ja", { numeric: true }).compare);
  return keys.map((key: string) => ({
    default: r(key)! as string, // `default` は画像のパスとして扱う
  }));
};

// `public/images` フォルダ内のすべての画像ファイルをインポート
const images: Image[] = importAll(require.context("../../images", false, /\.(png)$/));

const ImageIcon: React.FC<ImageIconProps> = ({ index, brightness }) => {
  if (index < 0 || index >= images.length) {
    return null; // インデックスが範囲外の場合は何も表示しない
  }
  const image = images[index];

  // 明度を調整するスタイルを動的に生成する
  const brightnessStyle = {
    "--brightness": `${brightness}%`, // カスタムプロパティに明度を設定
  } as React.CSSProperties;

  return (
    <div className="aws_service_icons">
      <img
        src={image.default}
        alt={`image-${index}`}
        className="aws_service_icon"
        style={brightnessStyle} // 明度を調整するスタイルを適用
      />
    </div>
  );
};

export default ImageIcon;

1. 画像の読み込み

・特定のディレクトリ（今回はimages）内の画像を全て読み込む

・これらの画像はImageIconからindexを指定することで使用することができる

2. 動的な画像の明度変更

・引数（brightness）によって、適用する明度を変更する