Rails + React + Webpack加载图像

我正在使用rails + webpack将bundle.js文件编译到rails资产管道中。我在名为“main.png”的/ app/assets/images中放置了一个图像。我如何在被捆绑的React组件内部访问这个镜像？Rails + React + Webpack加载图像

我正在使用shakacode的rails rails gem上的反应。 https://github.com/shakacode/react_on_rails

然后我尝试使用webpack处理它成功完成的图像并将图像放置在bundle.js文件旁边。我仍然在图像上得到404。

我知道我很接近，只是有轨道资产的publicPath错误。这个当前的设置给出了一个localhost：3000/webpack/main.png，它不适用于rails。

这是我的WebPack文件：

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 
}

来源

2016-09-10 Dileet

正确定义装载机后，您可以用require功能加载您的图像，例如！例如，添加进口近：

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

然后，在组件的渲染方法：

<img src={myImg} />

这应该工作...

来源

2016-09-10 05:01:30

但当的WebPack处理图像它被重命名并放入/ webpack /文件夹 – Dileet

它是Webpack所做的捆绑过程的一部分。例如，大多数应用程序最终都会将图像上传到CDN提供商，并使用绝对URL。 '' –

你能解释一下你的意思吗？我试过你的建议，但我得到： “找不到模块”./images/image001.svg“当我尝试要求资产时。 – Riina

Rails + React + Webpack加载图像

回答

相关问题