Requiring images with dynamic paths

Is it possible to require images with dynamically created paths? E.g.:

import React from 'react';

export default ({ imgName }) => (
  <div>
    <img src={require(`./images/${imgName}`)} />
  </div>
);

Something along the lines described in this article https://medium.com/@bogdan_plieshka/loading-static-and-dynamic-images-with-webpack-8a933e82cb1e

Thanks for any help!

[james-wallis]

Ran in to this problem earlier. I was unable to use a totally dynamic path.

This didn’t work:

const sauce = '../../images/background.jpg';
<img src={require(`${sauce}`)} />

But this did work:

const sauce = 'background.jpg';
<img src={require(`../../images/${sauce}`)} />

Also relevant if you’re using dynamic paths: https://github.com/cyrilwanner/next-optimized-images/issues/141#issuecomment-623556804

[kotay]

This works great, how can I get this to work with query parameters (?webp), the following does not seem to work:

import React from 'react';

export default () => (
  <div className={styles.Row}>
    {
      [1, 2, 3].map(imageId => (
        <img key={imageId} src={require(`./assets/images/dynamic/image-${imageId}.png?webp`)} />
      ))
    }
  </div>
);