webpack：别名在HTML标记中不起作用

问题描述

下面的别名在HTML标记中不能使用还是在JavaScript中不能使用？

在我的webpack配置文件中：

  resolve: {
    alias: {
      '~': path.resolve(__dirname,'./src/')
    }
  },...
 ...
 ...

 {
    test: /\.(png|svg|jpg|gif|ico)$/,use: [
      {
        loader: 'file-loader',options: {
          outputPath: 'images',esModule: false,name: '../assets/images/[name].[ext]'
        },},]
 },{
   test: /\.(html)$/,use: ['html-loader']
 }

在我的HTML文件（.vue）中：

// .vue
// Does not work
<template>
  <p><img src="~/assets/images/sample.jpg"></p>
</template>

// Ok
<script>
import Image from '~/assets/images/sample.jpg'
</script>

我在Webpack配置中缺少什么吗？

解决方法

在这种情况下实际使用

vue-html-loader和css-loader。

您可以尝试以下方法：

<img class="logo" src="~assets/images/sample.jpg">

或

<template>
  <div>
    <img :src="sample" />
  </div>
</template>

<script>
import image from '~/assets/images/sample.jpg';

export default {
    data() {
        sample: image;
    }
}
</script>