Rails + React + Webpack lädt ein Image

Question

Ich benutze rails + webpack um eine bundle.js Datei in die Rails Asset Pipeline zu kompilieren. Ich habe ein Bild in/app/assets/images namens "main.png" platziert. Wie kann ich auf dieses Image in einer React-Komponente zugreifen, die gebündelt wird?

Ich benutze shakacode reagiert auf Schienen gem. https://github.com/shakacode/react_on_rails

Ich habe dann versucht, mit Webpack das Bild, das es erfolgreich durchgeführt wurde, zu verarbeiten und legte das Bild neben der Bundle.js-Datei. Ich bekomme immer noch eine 404 auf dem Bild.

Ich weiß, ich bin in der Nähe, nur die PublicPath falsch für die Schienen Asset. Dieses aktuelle Setup gibt einen localhost: 3000/webpack/main.png, der nicht mit Rails arbeitet.

Das ist meine webpack Datei:

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 
} 

Answer 1

Nach einem Lader richtig zu definieren, können Sie Ihr Bild mit einer require Funktion, zum Beispiel laden! Fügen Sie zum Beispiel in der Nähe Ihrer Importe:

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

Dann in Ihrer Komponente Render-Methode:

<img src={myImg} />

, die funktionieren sollte ...