Getting images to display from a local source

Question

A image will load if i type in the path of the image like below:

 <li><a href="#"><img src={require('../images/it.jpg')} />

but if i do it dynamically where it gets the image url from JSON, it just won't work, i get this error Error: Cannot find module "."

const TopMovies = ({tops}) =>(

   <ul>

<li><a href="#"><img src={require(tops.image)} />
</a></li>
    </ul>
    );
};
    export default TopMovies;

require('image.jpg') only works if you're using webpack. Are you using webpack? — Andy Ray, Sep 14 '17 at 23:27
yes i am, it works if i actually paste in image url, just not the way i need it to work. — Sean, Sep 14 '17 at 23:31
And you're sure `tops.image` exists? If you console log in your component, it's present? — Andy Ray, Sep 14 '17 at 23:35
oh yeah, I forgot webpack's api is a nightmare https://github.com/webpack/webpack/issues/118 — Andy Ray, Sep 14 '17 at 23:48

score 0 · Answer 1 · answered Sep 14 '17 at 23:24

From the React Native Image Docs (I know your code is not react-native)

In order for this to work, the image name in require has to be known statically.

// GOOD
<Image source={require('./my-icon.png')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

Getting images to display from a local source

1 Answers1