Can't import image from src

So I have a list of reviews each with an logo field which is a path to the image. The images are in an images folder in my src folder.

Example logo: 'src/images/logos/zoosk-logo.png',

I have a Reviews component which renders out Review components from the list passing the review object as a prop.

In the Review component I then display the logo in an image tag. Like so:

<img className="review__logo" src={this.props.review.logo} alt=""/>

This works great with npm start, but when I use the run build, the images aren’t copied over to the build file so the links don’t work. I know if you import the image then webpack will bundle it in the build step. But I can’t import it, because the path comes from a prop, and imports can only be done at the top.

Is there anyway to go around this? I’m relatively new to react.

[gaearon]

No, you don’t need to eject for this. Just import those images wherever you create this object.

import logo from './logo.png'
import logo2 from './logo2.png'

export default {
  logo,
  logo2
}

Then pass this object down as you like. Importing images can be done in any file.

[gaelollivier]

Your use case is actually fully supported thanks to an awesome webpack feature called dynamic require

Instead of manually writing all your import statement, you can dynamically require your images with runtime parameters like require('./teams/' + team + '/' + image + '.svg') and webpack will auto-magically figure out what files could match this expression and include them in your bundle.

Here is an example based on the create-react-app starter template:

If you run npm run build on this app, you get a bundle that will look like this:

Webpack automatically figured-out all the files that could match

require(`./teams/${team}/${image}.svg`)

and included them in your bundle 😃