12.file-loader使用

1.loader

publicPath配置这里可以动态添加cdn 链接

 {
   test: /\.(jpg|jpeg|png|svg|jpg|gif)$/,
     use: [
       {
         loader:'file-loader',
         options: {
           name: '[name].[contenthash].[ext]',
           outputPath: 'static/assets/',
           publicPath: 'static/assets/',
         }
       }
     ]
 },

2.组件中使用

引入

<script>
import img_1 from './img_1.jpg';
</script>

template中使用

<div class="box-item" 
:style="{backgroundImage:`url(${img_1})`}">
  box-item
<!-- <img :src="img_1" alt=""> -->
  </div>

3.页面展示

<img data-v-208443ca="" src="static/assets/img_1.b53b6224ac6aa5cf7da66b2e9b5db6d0.jpg" alt="">