過去にHTML・CSSでWebページを作成したことがある方だと
Reactでの画像の表示方法に戸惑う方がいると思うので本記事で概要と解決方法を記載します

概要

Reactと一般的なWebサイトではレンダリング方式が異なります

一般的なWebサイトの場合

WebサーバーにホストしてあるHTMLのURLにアクセスがあったら
Linkタグ(CSS・画像など) を解釈してページを表示します

Reactの場合

なにも書かれていない index.html を表示します
(なにか書かれていてもいい)
なにも書かれていない index.html の内容を
Reactで生成したJavascriptによって変更することで文章や画像を表示します
(SPAと呼ばれる技術)

解決方法

Reactでは画像を事前にimportする必要があります

この例では 5行目で画像をimportして 11行目でimportした画像を設定しています

import React from "react";

import "./Demo.css";

import FemaleWorkerCheckingData from "../images/female-worker-checking-data.png";

const Demo: React.FC = () => {
  return (
    <div className="Demo">
      <div>Demo</div>
      <img src={FemaleWorkerCheckingData} alt="female-worker-checking-data.png" />
    </div>
  );
};
export default Demo;