Cannot retrieve images in my react component

Question

I am quite new at coding so please be indulgent... I searched a lot and I don't manage to get my issue fixed :(

I would like to get my images rendered through and html img tag. I saw that the best way in react is to import my images. Like this :

import avatar from './avatar.png';

export default class Connection extends React.Component {
  render () {
      return (
        <div>
          {this.props.user.firstname}&nbsp;{this.props.user.lastname}
          &nbsp;<img src={avatar} className='img-circle' />
          &nbsp;&nbsp;&nbsp;<a href='#' onClick={this.props.logout}>Déconnexion</a>
        </div>
      );
  }
}

I use the following webpack config to load these images :

module: {
    loaders: [
      { test: /\.jsx?$/, exclude: [/node_modules/], loader: 'babel' },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') },
      { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'file-loader?hash=sha512&digest=hex&name=[path][name]-[hash].[ext]' },
      { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'url-loader?limit=10000' }
    ]
  }

I see that webpack manage to load the jpg or png files but when it comes to display it, it seems that the file generated/copied is not available (ex: /MyApp/avatar-50b93a2df8aec266d7c8c1c0f5719d1b.png is not available).

I use the webpack dev server so I don't see my files bundled and the dist or build folder created.

Any idea of solving my issue ?

Thanks,

When using the require within the img tag I get the following error :

Module not found: Error: Cannot resolve 'file' or 'directory' ./avatar

I tried to get the extension in the webpack config but it does not solve anything :(

Here is my public path config in my webpack config :

output: {
    path: path.join(__dirname, '/build'),
    publicPath: '/',
    filename: 'bundle.js'
  }

Try running you dev server by adding '--content-base build/' in your dev server run command. — Prakash Sharma, Jan 29 '17 at 16:23

Oscar Franco · Accepted Answer · 2017-01-29T15:59:55.373

1

To load images with Webpack you need to do:

<img src={require('./avatar.jpg'})/>

Webpack crawls through your application codebase, code gets bundled into a single file however files are not kept in the same structure, by calling require Webpack will do dependency management for you, in this case the file will move around and code will be injected so it is pointing to it's bundled location.

edited Jan 29 '17 at 15:59

answered Jan 29 '17 at 14:26

Oscar Franco

5,691
5
34
56

Thanks for your answer but by doing what you say I get the error described above – Clement Levesque Jan 29 '17 at 15:15
Forgot to add file extension in there, try with that and let me know how it goes – Oscar Franco Jan 29 '17 at 16:00
There is no need of require as import works the same way. – Prakash Sharma Jan 29 '17 at 16:14
With the resolve info for png or jpg extension (my file is a png) it does not manage to get the file displayed even if it manages to solve the file type – Clement Levesque Jan 29 '17 at 16:16
@prakash also tried and it says cannot find module '..../avatar-50b93a2df8aec266d7c8c1c0f5719d1b.png' – Clement Levesque Jan 29 '17 at 16:18
@ClementLevesque try to add this to your webpack config: { test: /\.png$/, loader: 'file' }, – Oscar Franco Jan 29 '17 at 17:27
2

Finally the way to solve my problem was to use the url-loader without the file-loader which includes it. I did not know about that but it seems that it was the issue :) thanks a lot for your help anyway ! :) – Clement Levesque Jan 30 '17 at 20:51

score 0 · Answer 2 · answered Jan 29 '17 at 18:25

0

You can take a look at this article from SurviveJS Book. Load Images Chapter

answered Jan 29 '17 at 18:25

Alejandro Nanez

335
2
6
16

Cannot retrieve images in my react component

2 Answers2