React srcパス指定エラーの解決

Question

前提・実現したいこと

React・Firebase・Material-UIを用いたチャットボットアプリを作成中に
使用する画像のパス指定後エラーが表示されたため、原因究明および解決にご教授ください。

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

該当のソースコード(Chat.jsx)

import React from 'react'
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
// 画像をモジュールとして扱う
import NoProfile from '../img/no_profile'
import Profile from '../img/profile'

const Chat = (props) => {
    console.log(props)
    // propsで受け取った配列の内容が質問なのか答えなのか判断する
    // カッコ内の条件が当てはまる時変数にtrueが代入される
    const isQuestion = (props.type === 'question');
    console.log(isQuestion)
    // isQuestionがtrueの場合p-chat_rowを代入し、falseの場合はp-chat_reverseを代入する
    const classes = isQuestion ? 'p-chat_row' : 'p-chat_reverses';
    console.log(classes)

    return (
        // 
        <ListItem className={classes}>
            <ListItemAvatar>
                {/* if else文 */}
                {isQuestion ? (
                    // isQuestionがtrueの時
                    console.log("isQuestionはtrue"),
                    <Avatar alt="icon" src={NoProfile} />
                ) : (
                    // isQuestionがfalseの時
                    console.log("isQuestionはfalse"),
                    <Avatar alt="icon" src={Profile} />
                )
                }
            </ListItemAvatar>
            <div className="p-chat__bubble">{props.text}</div>
        </ListItem>
    )
}

export default Chat

ファイル構成

試したこと

<Avatar alt="icon" src={Profile} />　こちらの文を
<Avatar alt="icon" src='../img/profile.JPG' />　このように書き換えても画像が表示されませんでした

Comments

[hentaiman]

記載のファイルからのパスが違うだけだと思うが、しかしここまでコード書けるのにその程度の事でつまづくというのが正直かなり不可解です
もし何か参考にしたソースがあるならそのファイル構成を真似るとかしたらどうでしょう？

[maisumakun]

jpegファイルをimportできるようにするloaderなどは導入済みでしょうか？

[guuuuuuuuura]

導入してませんでした。画像をモジュールとして使用するにはurl-loaderを使用する必要があるのですね。