まちがった方法でimgタグのsrcを指定していた話

はじめに

Reactでimgタグに画像を指定する際、htmlのときと同じように画像のパスを指定していました。
しかし、この方法は正しくないということを知ったので、何がどうまちがっているのかを含め、正しい設定方法についてまとめました。

環境

本記事の実装においては、以下のものを使っています。

ライブラリ	バージョン
React	18.2.0
TypeScript	5.2.2
Vite	5.2.0

まちがった指定方法

「まちがった」とは言っていますが、この書き方で画像が表示されないわけではありません。
開発環境においては問題なく画像が表示されます。

MyImage.tsx

const MyImage = () => {
  return (
    <>
      <img src="src/assets/myIcon.png" />
    </>
  );
};

export default MyImage;

一見、正しそうな感じがしますが、src属性に直接画像パスを指定してはいけません。
なぜだめなのか、については後ほど確認します。

正しい指定方法

MyImage.tsx

import myIcon from "./assets/myIcon.png";

const MyImage = () => {
  return (
    <>
      <img src={myIcon} />
    </>
  );
};

export default MyImage;

reactにおいて、画像ファイルを読み込む際はインポートして利用します。
こうすることにより、本番環境へビルドしたときに適切なパスでファイルを読み込むことができます。

どういうことか

開発環境においては/myIcon.pngとなっている画像が、本番環境のビルドでは/myIcon.2d8efhg.pngというふうにハッシュ化されます。

実際にビルドされたあとのものを確認してみます。

比較のために、imgタグのsrcに直接画像のパスを設定したものも用意しました。
インポートした画像の方は、myIcon.pngのファイル名が変化していますが、直接画像のパスを指定したほうは変化していません。

つまり、パスを直接指定した場合、画像を表示することができなくなります。
現に、「srcに指定した画像」には画像を正しく表示できていません。

まとめ

今回はだいぶあっさりとした記事になりましたが、画像ファイルを使用する際の方法についてまとめました。

なぜそのような挙動になるのか（ハッシュ化するのか）、についてまで言及したかったのですが、viteやwebackなどの挙動について深く理解する必要があったため、今の知識では太刀打ちできず、断念しました。

また知見が溜まってきたら改めてこの点について触れたいと思います。