Vue项目中引入图片和背景图片

对于普通的 .png 图片，可以使用以下方法

1. HTML结构法
   此处的 "~"是用来让css-loader去解析的

<img src='~@/assets/avatar.png'/>

2. 当做模块引入使用

<template>
    <img :src='png'/>
</template>
import xxx from '@/assets/xxx.png'

export default {
  data(){
    return {
      png:xxx 
    }  
  }
}

3. 可以在生命周期中赋值

mounted(){
    this.img = require("@/assets/xxx.png")  
}

对于由base64转义后的JS文件只能使用第二种方法

背景图片导入

1. import导入文件使用

<template>
    <div :style="{background:'url(' + img + ')'}"> </div>
</template>

<script>
   import xxx from '@/assets/xxx.png'
   export default {
     data(){
       return {
         img:xxx
       }  
     }
   }
</script>

2. 在<style>中使用

<style>
        .bgImg{
              background:url("~@/assets/xx.png")
        }
</style>

如有问题请留言，我会及时改正。
谢谢你 !