Webpack File/Image loader for images in .ejs template

I think ejs has no image loader support

You can try this link underscore-template loader to load the image files as suggested by author in this thread

The other loader for the webpack includes ejs-loader


Just to provide an updated answer. In Webpack 4, you can load images in .ejs files without html-loader.

Change your src attribute in your img tags to:

<!-- index.ejs -->
<img src="<%= require('../../home.png') %>" alt="image text">

Enable CommonJS module syntax with esModule: false

// webpack.config.js
module: {
  rules: [
    ...,
    test: /\.(png|jpg|etc)$/,
    use: [{
      loader: "file-loader", // or url-loader
      options: {
        ...,
        esModule: false,
      }
    }]
  ]
}

If you wish to use variables with require, you may need to change the syntax, see this other SO question and this example on Github:

// webpack.config.js
new HtmlWebpackPlugin({
    image: '/path/to/image.png',
})
<!-- index.ejs -->
<img src="<%=require('html!./' +htmlWebpackPlugin.options.image + '.html' ) %>" alt="image text">