React × Viteで画像ファイルを動的にimportする

以下の要件

reactコンポーネントで大量の画像のうち条件によってimportする画像を動的に切り替えたい

事前に全部の画像ファイルを一つずつimportするのが煩わしい

NG例

code:jsx

<img

/>

srcにパスを直接渡す方法

これだとlocalでは表示ができるが、本番（ビルド時）ではViteが画像のパスを解決できない

下記を追加する

code:jsx

import.meta.glob('./assets/images/point/**/*.png')

ディレクトリを指定して一括importしておく

これでもダメだった

成功パターン

code:js

function getImageUrl(name) {

}

最終的には以下の形になった

code:js

export const getImage = (path: string): string => {

return urlObj.href;

};

export const setImageSrc = (elementId: string, path: string) => {

const imageSrc = getImage(path);

const image = document.getElementById(elementId) as HTMLImageElement;

if (!image) return;

if (image.tagName === 'IMG') {

image.src = imageSrc;

} else {

image.srcset = imageSrc;

}

};

code:jsx

useEffect(() => {

}, []);

img要素のIDと画像のパスを渡して、後からsrcプロパティにセットするとうまくいった