<template>
  <div>
    <!-- 成功引入的三种方法： -->
    <!-- 1 -->
    <img src="~@/da.jpg" width="100">
    <!-- 2 -->
    <div class="img1"></div>
    <!-- 3 -->
    <div class="img2" :style="{backgroundImage: 'url(' + img + ')' }"></div>
  </div>
</template>

<script>
import Img from '@/da.jpg'

export default {
  data () {
    return {
      img: Img,
    }
  }
}
</script>

<style>
  .img1{
    width: 100px;
    height: 100px;
    background: url('~@/da.jpg') center center no-repeat;
    background-size: 100px auto;
  }
  .img2{
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: 100px auto;
  }
</style>