Importing Images in Electron React Boilerplate

27 Apr 2017

You’ll need to do a few things to properly import images in electron-react-boilerplate

First, create a directory under app/ to store your image files (e.g. app/img). Then drop your images in the folder.

Here’s the correct (and only!) way to import images correctly in electron-react-boilerplate: 

// First, import the image like this
import image_src from './../img/your_image.png';

// Use it inline like so (in React)
class YourImage extends React.Component {
 render(){
    return (
      <img src={image_src} />
    )
 }
}

// Next, add this entry into webpack.config.base.js under modules.loaders:
{
  test: /\.(png|jpg)$/,
  loader: 'url?limit=25000'
}

// Important!!! Make sure that you disable these lines in webpack.config.production.js
{
   test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
   loader: 'url-loader'
}

Related Posts