我正在使用带有React on Rails的webpack，并且有一些需要引用图像的反应组件 .
我遇到的问题是试图让Rails访问图像 . Rails的图像来自其通常的app / assets / images目录，可通过url / assets访问
但是，如果我在图像目录中有一个react组件和一个图像：
component.js
图像/ image.jpg的
--component.js --images / image.jpg
如果我尝试通过component.js中的相对路径引用图像，例如，当我在rails中加载页面时，页面会尝试访问url http://localhost:3000/home/images/image.jpg而不是rails期望资产为http://localhost:3000/assets/images/image.jpg的URL
有谁知道如何纠正这个？
这是我的webpack.config
const webpack = require('webpack')
const path = require('path')
const devBuild = process.env.NODE_ENV !== 'production'
const nodeEnv = devBuild ? 'development' : 'production'
const config = {
entry: [
'whatwg-fetch',
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/index.js'
],
output: {
filename: 'webpack-bundle.js',
path: '../app/assets/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: /\.(jpe?g|png|gif|svg|ico)$/, loader: 'file-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
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
}