Open sibinx7 opened 7 years ago
I have some issues with Image path. I have a React-Rails-Webpack project. I want to add a logo on header. Header,Sidebar and all other items are React components. (React router used for routing )
{ test: /\.(gif|png|jpe?g|svg)$/i, loaders:[ 'file?hash=sha512&digest=hex&name=[hash].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' ], }
let LogoImage = require('./icon.png');
Notice: JS and Image files are in same directory
On local server, their is no issue
Local server path <img src="//localhost:3808/webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png" alt="">
<img src="//localhost:3808/webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png" alt="">
But on production (Heroku), the path become
<img src="/e6a2e7e6cfa80a367c09780b93d2cef6.png" alt="">
But file available inside webpack folder in public folder. original path webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png
webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png
I have added this on webpack.config file for a quick fix
if (production) { config.plugins.push( new webpack.NoErrorsPlugin(), new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false }, sourceMap: false }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin() ); config.output.publicPath = '/webpack/'; // added for quick fix |
I don;t think this as good solution, Is there any good solution to fix my problem
file or directory not found when i use like below
file
directory
{ test: /\.(gif|png|jpe?g|svg)$/i, // loaders:[ // 'file?hash=sha512&digest=hex&name=[hash].[ext]', // 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' // ], loaders:[ 'url-loader','file-loader', { loader:'image-webpack-loader', query: { bypassOnDebug:true, progressive:true, optimizationLevel: 7, interlaced: false } } ], exclude: /node_modules/, include:[ path.join(__dirname,'..','app','assets','images'), path.join(__dirname,'..','app','assets','javascripts','dashboard') ], }
First issue
I have some issues with Image path. I have a React-Rails-Webpack project. I want to add a logo on header. Header,Sidebar and all other items are React components. (React router used for routing )
Webpack config file
Image loaded using require
Notice: JS and Image files are in same directory
On local server, their is no issue
Local server path
<img src="//localhost:3808/webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png" alt="">
But on production (Heroku), the path become
But file available inside webpack folder in public folder. original path
webpack/e6a2e7e6cfa80a367c09780b93d2cef6.png
I have added this on webpack.config file for a quick fix
I don;t think this as good solution, Is there any good solution to fix my problem
Second issue
file
ordirectory
not found when i use like below