时间戳

首页 > 解决方案 > 如何在 index.html 模板中引用图片资源

webpack - 如何在 index.html 模板中引用图片资源

问题描述

在我导出为的模板中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: {}}
  ]
}

标签： webpackhtml-webpack-pluginwebpack-html-loader

解决方案

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

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

推荐阅读