记录项目中：图片引入的几种方式 h5

一/ 可以通过import的方式

<template>
   <div class="nb-logo" :style="'backgroundImage: url('+logo+') '"></div>
   <img :src="status ? music : musicStop" alt=""   @click="click" />
</template>
<script>
import music from '@/common/images/music@2x.png';
import musicStop from '@/common/images/music-stop@2x.png';

data() {
    return {
      status: true,
      music,
      musicStop
    };
 },
 methods: {
 // 通过status的状态来控制图片的显示
   click() {
     this.status = !this.status;
   }
 }

二/用@/^^^^^^ 相对地址引入

1.在template里面：

 <div class="bottom">
   <img src="@/common/imgs/16-btn@2x.png" alt="" class="btn" @click="click">
 </div>

2. 在script里面：

require('@/                     ')

  <van-share-sheet
    :options="options"
  />

data() {
	return {
      options: [
        {         
         type: '2',
          icon: require('@/common/imgs/share-xiazai.png')
        },
	}
}

三/ 在style里面用~@/^^^^^^^^^引入

background: url (~@/      )

<div class="light"></div>

<style lang="scss">
.light{
  background: url(~@/common/imgs/rank_light@2x.png) no-repeat;
  background-size: cover;
}
</style>