Rails + React + Webpack loading an image

Question

I'm using rails + webpack to compile a bundle.js file into the rails asset pipeline. I placed an image inside /app/assets/images called "main.png". How can I access this image inside a React component that's being bundled?

I'm using shakacode's react on rails gem. https://github.com/shakacode/react_on_rails

I then tried using webpack to process the image which it did successfully and placed the image next to the bundle.js file. I still get a 404 on the image.

I know I'm close, just have the publicPath wrong for the rails asset. This current setup gives a localhost:3000/webpack/main.png which isn't working with rails.

This is my webpack file:

const webpack = require('webpack');
const path = require('path');

const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';

config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/Register.js',
  ],

  output: {
    filename: 'webpack-bundle.js',
    path: '../app/assets/webpack',
    publicPath: '/webpack/'
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom'),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv),
      },
    }),
  ],
  module: {
    loaders: [
      {
        test: require.resolve('react'),
        loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
      },
      {
        test: /\.jsx?$/, loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg)$/i,
        loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&interlaced=false'
        ]
      }
    ],
  },
};

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  config.plugins.push(
    new webpack.optimize.DedupePlugin()
  );
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

Rafael Angeline Rafael Angeline · Accepted Answer · 2016-09-10T05:01:30

After defining a loader properly, you can load your image with a require function, for example! For example, add near your imports:

const myImg = require('./assets/methods.png');

Then, in your component's render method:

<img src={myImg} />

That should work...

Rails + React + Webpack loading an image

1 Answers