はじめに

ChakraUIを利用していて地味に時間がかかった個所だったのでまとめています
Reactでローカルの画像をページに表示したいときも同じ方法で解決できます

問題

App.tsxと同じ階層にtest.pngを用意して以下のようなコードを書きました

App.tsx

<Box boxSize='sm'>
  <Image src='./test.png' alt='ローカルの画像' />
</Box>

これでローカルの画像が読み込めると思ったのですが読み込めませんでした

ローカルの画像をインポートする必要がありました

App.tsx

import img from "./test.png"

(省略)

<Box boxSize='sm'>
  <Image src='./test.png' alt='ローカルの画像' />
</Box>

これで読み込めるようになりました

Reactでローカル画像の読み込みをしたことがなかったのですがインポートが必要だったとは
調べてみてもChakraUIをいれてしまうとなかなか解決できなかったです