Import random file, using react js, babel and es6

Question

I have an issue with displaying of random image with webpack. I have a directory, with several images, like

1.jpg, 1-cropped.jpg

2.jpg, 2-cropped.jpg

And I need to fetch random image from there. It would be better If I will not be needed to mannually add a reference for each file. But if there - I whatever do not understand, how can I reference to imported variable, like

import 1 from '../1.jpg'

If I only know the generated number of it. Thanks a lot.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

It's easy. You can use require inside the render. Like the example below:

render() {
    const {
      someProp,
    } = this.props

    const graphImage = require('./graph-' + anyVariable + '.png')
    const tableImage = require('./table-' + anyVariable2 + '.png')

    return ()
}

Import random file, using react js, babel and es6

Sign up