Images does not show up after processing via webpack

Question

I began to use webpack in my React application for bundling images but they don't show up in the browser (there is an <img/> tag, but no image). If I run "webpack" images are present in the public folder with hashed names and if I run "webpack-dev-server" it also shows that images are bundled, but still nothing in the browser. This is my webpack configuration file:

module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');

return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
        path: path.resolve(__dirname, './public/scripts'),
        filename: 'bundle.js'
    },
    module: {
            rules: [{
                 loader: 'babel-loader',
                 test: /\.js$/,
                 exclude: /node_modules/
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8000, // Convert images < 8kb to base64 strings
                        name: 'images/[hash]-[name].[ext]'
                    }
                }]
            },
            {
            test: /\.s?css$/,
            use: CSSExtract.extract({
                use : [
                    {
                        loader : 'css-loader',
                        options : {
                            sourceMap : true // source map for css in development
                        }
                    },
                    {
                        loader : 'sass-loader',
                        options : {
                            sourceMap : true
                        }
                    },
                    {
                        loader: "jshint-loader"
                    }
                ]
            })

        },
        ]
    },
    plugins : [
        CSSExtract,
    ],
    devtool: isProduction ? 'source-map' : 'cheap-eval-source-map', // source map for locating a bug in source files, not in the bundle
    devServer: {
        contentBase: path.join(__dirname, "public"),
        publicPath: "/scripts/",
        historyApiFallback: true // this line is for client-side routing
    },
}

}

and this is how I add image to my application:

import img1 from '../../assets/img/ticket.jpg';

and this is how I use it in render() method.

<img src={img1}/>

and I see this in the browser devtools but image itself does not show up:

<img src="images/9011429377e91d003e5b64251ac3b9a8-ticket.jpg">

How can I fix it and make images show up?

did you ever find a solution to this? i'm having a similar problem - i think — Ben Kemp, Nov 07 '20 at 08:08

score 0 · Answer 1 · answered Dec 29 '17 at 20:15

Hi I don't know if this helps. When I import images I do something a little different and use the name of the image instead of using the generated numbers.

In the application script I put.

import '../../assets/img/ticket.jpg';

Then in the render method I put.

 // notice the slash as the front of the "src"
 <img src="/assets/ticket.jpg">

And in my webpack I have this:

  {
    test: /\.(png|jpg|gif|json|xml|ico|svg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'assets/',
          publicPath: '/'
        }
      }
    ]
  }

@JasonAllshorm, thanks for your answer! Unfortunately, that hasn't solved my problem: I still don't see images showing up in my browser even after changes you suggested. — turisap, Dec 30 '17 at 20:18

Zohar Chiprut · Answer 2 · 2023-08-30T23:58:00.580

Although it might be outdated question I believe the reason you can’t see the image is that the browser can’t retrieve the src url of that image. It can be tested by opening new tab and trying to retrieve that url. Devserv configured to retrieve only scripts. Output missing also publicPath definition (might be “/“) The is no mentioning index.html and what plugin is used to produce it or what version of Webpack you have, but if it is manually adding script tag to point to bundle.js then you can direct to src=scripts/bundle.js in the script tag, devserv.publickPath=“/“, output.publickPath=“/“

Images does not show up after processing via webpack

2 Answers2