🎉

React × TypeScript で画像ファイル import 時に発生するエラーを解消する

2022/07/11に公開

React

概要

React ( Typescript )で画像を扱う場合に陥る、画像 import 時に起きるエラーを解消する。

環境

Windows 10 Home
Node 16.14.0
npm 8.5.1
npx 8.5.1
React ^18.2.0

実装前に想定するディレクトリ構成

src
  ┣ App.tsx
  ┗ index.tsx

手順1 使用する画像をディレクトリ内に配置

src ディレクトリ配下に assets/images ディレクトリを作成する。

mkdir assets/images

そして、images ディレクトリの中に使用する画像を配置する。

images
   ┗ sample.jpg

手順2 使用する画像の型定義を作成

src ディレクトリ配下に types ディレクトリを作成する。

mkdir types

そして、types ディレクトリ配下に画像を読み込むための型定義ファイル import-image.d.ts を作成する。この定義ファイルを作成することで import 時に発生するエラーを解消することができる。

touch types/import-image.d.ts

作成後、このファイル内に以下記載する。

import-image.d.ts

declare module "*.jpg"

この定義ファイルを作成することで import 時に発生するエラーを解消することができる。

手順3 .tsx ファイル内で import する

今回は App.tsx 内で sample.jpg 画像を import する。

App.tsx

・・・
import SampleImage from "./assets/images/sample.jpg"

function App() {
  return (
    <div>
      ・・・
      <img src={SampleImage} alt="sample" />
      ・・・
    </div>
  )
}

このように sample.jpg を import して sample.jpg を .tsx ファイル内で使用することが可能になる。

実装後のディレクトリ構成

src
  ┣ assets
  ┃   ┗ images
  ┃       ┗ sample.jpg
  ┣ types
  ┃   ┗ import-image.d.ts
  ┣ App.tsx
  ┗ index.tsx