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">