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'
}