How to reference an image asset inside the index.html template

Question

Inside my template that exports as index.html, I have this line:

<meta name="og:image" content="/assets/images/image.jpg">

My goal is to have it be exported with the hashed name:

<meta name="og:image" content="/assets/images/image.hug2u3g5gx23g.jpg">

Instead, it is exported with the original name.

---

My intex.html template is loaded as:

  new HtmlWebpackPlugin({
    template: './app.ejs',
    filename: 'index.html',
    chunksSortMode: (a, b) => scriptsOrder.indexOf(a.names[0]) > scriptsOrder.indexOf(b.names[0]),
    env: {isProd, isWeb, isHybrid}
  })

Here's my file loader:

{
  test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$)/,
  use: [
    {loader: 'file-loader', options: {name: '[path][name].[hash].[ext]', context: './src'}},
    {loader: 'image-webpack-loader', options: {}}
  ]
}

Answer 1

Inside the ejs -> index.html template, interpolate the image file like so:

<meta name="og:image" content="<%- require('./assets/images/image.jpeg') %>">