如何在 index.html 模板中引用图片资源答案

【问题标题】：How to reference an image asset inside the index.html template如何在 index.html 模板中引用图片资源
【发布时间】：2018-11-27 21:26:17
【问题描述】：

在导出为index.html 的模板中，我有这一行：

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

我的目标是使用散列名称导出它：

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

而是以原始名称导出。

我的intex.html 模板加载为：

  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}
  })

这是我的文件加载器：

{
  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: {}}
  ]
}

【问题讨论】：

标签： webpack html-webpack-plugin webpack-html-loader

【解决方案1】：

在ejs -> index.html 模板中，像这样插入图像文件：

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

【讨论】：