parcelで動的にファイルを読み込む

yuzu441.hateblo.jp

parcelでReactのアプリケーション書いてて、画像を動的に取得したい時にやり方が分からず困ったのでメモ

やりたかったこと

jsonか何かにデータを定義しておいて、そこから画面を組み立てたかった。

課題

静的な画像であればhtml内に含まれているimgタグのsrcプロパティを見て、そのパスにある画像をdistディレクトリ内にコピーしてくれる。

ただReactで動的に読み込むと当然imgのsrcはparcelのビルド時点では解決できないので表示できない

解決方法

parcelではassetsの読み込みをimportを書けばいい感じににやってくれる。

ここのポイントはimportで画像を読み込むとファイル名がキーになっているオブジェクトが返ってくる

// importで返ってくるオブジェクト
{
  hoge: 'hoge.hash.jpg'
}

そのためimages[fileName]のようにアクセスすると画像のパスが返ってくるので、それをimgタグのsrcプロパティに書いてやればいい

以下に動かした例

import * as React from 'react'
import ReactDOM from 'react-dom'

// img/hoge.jpgがあるとする
import images from './img/*.jpg'

const MyImg = () => <img src={images['hoge']}></img>

ReactDOM.render(<MyImg />, document.getElementById('app'))

参考

github.com