Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.
This repository was 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

Description

@sibinx7

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')
        ],
      }

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions