图片引入方式

1.直接引入

<img alt="Vue logo" src="../assets/logo.png" >

2.通过绑定的形式引入

<div>
<img :src="imgSrc" alt="">
</div>

<script>
export default {
  data () {
    return {
      imgSrc: require('../assets/logo.png')
    }
  }
}
</script>

3.通过import引入

<div>
 <img :src="imgSrc1" alt="">
</div>

<script>
import imgSrc from '../assets/logo.png'
export default {
  data () {
    return {
       imgSrc1: imgSrc
    }
  }
}
</script>

4.作为背景图时引入

<div>
<div class="div1" :style="{backgroundImage: 'url('+imgSrc1+')'}"></div>
</div>

<script>
import imgSrc from '../assets/logo.png'
export default {
  data () {
    return {
      imgSrc1: imgSrc
    }
  }
}
</script>

<style scoped>
.div1{
  width: 400px;
  height: 400px;
  background-color: rgb(76, 175, 175);
}
</style>

注：backgroundImage: 'url('+imgSrc1+')'   相当于 key:value