Loading images dynamically with Parceljs

Question

Is it possible to load images dynamically with parceljs bundler, when image names are not known at build time

Is there something similar to webpack's require.context in parcel

Code Snippet (using React and Parcel) This works fine

...
<img src={require('../images/Image4.jpg')}/>
...

But if expression is used, it throws "Uncaught Error: Cannot find module"

...
var imgName = "Image4";
...
...
<img src={require('../images/' + imgName + '.jpg')}/>
...

Image - Uncaught Error: Cannot find module

So, am i doing this wrong? is there any other way to do this with parcel

Answer 1

Based on Luke Robertson answer tried the similar hack and it worked for me:

import images from '../assets/cover/images/*.jpg';
const file_name = "file-name"
<img src=`${images[file_name]}` />

Answer 2

I dont think this is currently possible, one hacky way iv got it around it, is to do this :

import icons from './assets/icons/**'

const icon_file_name = 'user'
const specificIcon = icons[`${icon_file_name}.png`]

<img src={specificIcon} />