Webpack: Images wont load

Question

I am using Webpack for the first time and my images wont load...404 error. It seems that the images are not getting to my dist folder. If I manually insert the image files into the dist folder, then they will display. My understanding is that Webpack generates everything in the dist folder when you run it. This leads me to believe that the issue in my module rules.

Here is my image tag:

  <img class="img-responsive" src=<%=('images/tech-town-showcase-students.JPG') %> alt="students meeting with tech business owner"/>

And from my config.js:

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

I tried adding the dist folder to the path like this:

'file-loader?name=dist/images/[name].[ext]',

but that didn't help. What else should I be looking at?

Answer 1

Your images are not getting copied to the dist directory, because webpack doesn't process them at all, so your file-loader is not applied to it. In your image tag, you used:

src=<%=('images/tech-town-showcase-students.JPG') %>

Assuming that you are using EJS as the template engine, that would be equivalent to src=images/tech-town-showcase-students.JPG. Webpack doesn't process it as a module, because that's a regular string and it is not treated as an import.

You need to import it, so that webpack will apply the loaders you have configured for that file. You already have parentheses around the string, so it might be possible that you've copied it from somewhere and forgot to include the require.

src="<%= require('./images/tech-town-showcase-students.JPG') %>"