Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

Image path issue in Heroku production, also have issue with webpack 2 #81

Open
sibinx7 opened this issue Feb 23, 2017 · 0 comments
Open

Comments

@sibinx7
Copy link

sibinx7 commented Feb 23, 2017

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

      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        loaders:[
          'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ],
}

Image loaded using require

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="">

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

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

Second issue

file or directory not found when i use like below

      {
        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')
        ],
      }
@sibinx7 sibinx7 changed the title Image path issue in Heroku production Image path issue in Heroku production, also have issue with webpack 2 Feb 23, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant