我不能用pug视图模板渲染图像

Question

doctype HTMLhtml (lang ="en"头元(charset ="UTF-8"元(http-equiv ="X-UA-Compatible"内容="IE = edge")Meta (name="viewport" content="width=device-width, initial-scale=1.0")标题文件身体divImg (src='./tree.jpg' alt='login' style='width:100px;身高:100 px;")#形式形式(action ="/";方法="post"标签(for="name")名称
输入(type="text"name ="name"id ="name"占位符="okay"
输入(type ="submit"值="dingoo"

Answer 1

安装插件加载器:

npm install @webdiscus/pug-loader --save-dev

在webpack配置模块中添加以下规则:

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /.pug$/,
        loader: '@webdiscus/pug-loader'
      },
      {
        test: /.(png|jpg|jpeg|svg|ico)/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name].[hash:8][ext]',
        },
      },
    ]
  },
}

使用require() for image:

img(src=require('./path/to/tree.jpg)')

生成的HTML:

<img src="/assets/images/tree.23fe5de2.jpg">

@webdiscus/pug-loader .