(React + Webpack) Images Loading in Dev, but not Production (file-loader + image-webpack-loader)

Question

Everything works great in development, but when I try to build for production, the images don't show up on the page. They do show up in proper folder (i.e. my production folder has an images subfolder with the images present). When I look at the folders (Sources) in the browser, the images folder is not present. It seems like the react build isn't aware of the folder for some reason even though webpack is building it properly. I'm guessing this is a react issue and not a webpack issue, but I'm still new to both. All of the resources that I have found seem to indicate that what I have should work, but I feel like I'm missing something.

webpack.config.js:

rules: [
      ...
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          'file-loader?name=[name].[ext]&publicPath=/&outputPath=images/',
          'image-webpack-loader'
        ]
      },
    ]

In use:

<img src={ require( './images/shopping-cart.png' ) } alt="shopping cart" />

Edit: I now have the image folder showing up with the image in it (ostensibly), however, the image is completely broken. Even just inspecting it in the browser from the folder does not work.

SnapJosh · Accepted Answer · 2017-07-17 18:17:55Z

1

So it seems the answer was just to change '/' to './' and 'images/' to './images/'. I arrived at this through experimentation. Hopefully the answer helps someone else down the road.

rules: [
          ...
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
              'file-loader?name=[name].[ext]&publicPath=./&outputPath=./images/',
              'image-webpack-loader'
            ]
          },
        ]

answered Jul 17, 2017 at 18:17

SnapJosh

618 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

(React + Webpack) Images Loading in Dev, but not Production (file-loader + image-webpack-loader)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related