Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't import image from src

See original GitHub issue

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={} 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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:7
  • Comments:35 (21 by maintainers)

github_iconTop GitHub Comments

gaearoncommented, Sep 5, 2016

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 {

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

gaelolliviercommented, Sep 6, 2016

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


and included them in your bundle 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

cannot import image with create-react-app - Stack Overflow
I have a Home component and this is how I am importing the file: import photo from './party.png';. The component is located in...
Read more >
Module not found: Can't resolve image in React [Solved]
To solve the error, import the image and make sure the path that points to the image is correct in your import statement....
Read more >
Importing Images With React - Stack Abuse
In this short article, learn how to import images in React using require() and the import statement.
Read more >
React Images NOT Loading… - Josh Raiborde - Medium
the only suggestion that has worked so far is moving the image folder from Public to src. This solves the issue if the...
Read more >
Unable to Find Images Based on URL in React - freeCodeCamp
If you took a look at the docs, you'll notice that the code includes import statements to load assets like images and fonts....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found