※TypeScriptで書いてます。JavaScriptの人は型宣言無視しちゃってね。
複数の画像ファイルがあって、それを動的に読み込みたいとき、普通にファイル読み込みすると事前にimportしておかなきゃいけない
import file01 from '../assets/file01.png'
import file02 from '../assets/file02.png'
import file03 from '../assets/file03.png'
/* ・・・ */
import file99 from '../assets/file99.png'けど、ファイル多いとこんなことに。。。
流石にこれはナンセンス
必要なものだけ動的に読み込めないものか？
要するに
const getImage = (fileName: string): string => {
return `../assets/${fileName}.png`
}こうやって変数でパスを取得できるようにしておいて
const SampleImage: FC = () => (
<img src="{getImage('file01')}" alt="" />
);こういう風にして表示できるなら、渡す引数変えれば動的に表示できそう
Buildしたときにファイル名が自動的に変更されてしまうので、固定でパスを埋め込んでしまうとファイルが見つからないことになります
だからimport宣言が必要なんですね
Viteのガイドにimportの取り扱いについて記載がありました。
https://ja.vitejs.dev/guide/assets.html
const getImage = (fileName: string): string => {
return new URL(`../assets/${fileName}.png`, import.meta.url).href;
};これだとBuildしてもファイルが見つかります！
Kiyama
無事解決！
