TypeScript + Reactにて、画像の読み込みに失敗してError: Cannot find module '../../images/characters/test.jpg' となる

Question

前提・実現したいこと

npx create-react-app sample --typescript にて、TypeScript + Reactの環境を構築。
Cardコンポーネントを作成して、画像を読み込ませようとしたところエラーとなる。

bootstrap-react も使用していますが、特段こだわった作りにはしていません。

発生している問題・エラーメッセージ

Error: Cannot find module '../../images/characters/test.jpg' 

該当のソースコード

import React, { FC } from 'react';
import { Card, Button } from 'react-bootstrap'
import './index.css'

export interface ICard {
    id : number,
    imgSrc : string,
    characterName : string,
    cardText : string,
}

/**
 *
 * @param id
 * @param imgSrc
 * @param characterName
 * @param cardText
 */
const card: FC<ICard> = ({ id, imgSrc, characterName, cardText}) => {
    console.log(imgSrc);
    // const a = require('../../images/test.jpg'); この記述にすると通る
    const a = require(imgSrc); // imgSrcが'../../images/test.jpg'であるにも関わらずrequireできない
    return <Card style={{ width: '15rem', margin: '1rem 1rem' }}>
        <Card.Img variant="top" src={a} />
        <Card.Body>
            <Card.Title>{ characterName }</Card.Title>
            <Card.Text>
                { cardText }
            </Card.Text>
            <Button variant="primary">Go somewhere</Button>
        </Card.Body>
    </Card>
};

export default card;

試したこと

たとえば

const path = '../../images/test.jpg';
const a = require(path);

とすると、上記と同様のエラーメッセージが返されます。
require には変数を引数として渡すことはできないのでしょうか。

以上、よろしくおねがいします。

Answer 1

requireには変数を引数として渡すことはできないのでしょうか。

はい、create-react-appが使っているWebpackのrequireは、完全に変数だけを渡すことはできません。少なくとも、パスが分かるような引数を渡す必要があります。

Comments

[yakumomutsuki]

おっしゃる意味は理解できるのですが、具体的にはどのようにすべきでしょうか...

パスを直接書くしか回避の方法がなく、動的に画像の切り替えをできないのであれば、 `create-react-app` をejectするなり、そういった方法でないと難しいのでしょうか。

[maisumakun]

require('../../images/' + filename)のような形であれば処理可能かと思います（なお、jpegを処理する場合、適切なローダーが必要かと思いますが、自分はやったことがないので、そちらはよくわからないです）。

[yakumomutsuki]

なるほどです。参考にいたします。
ありがとうございました！