vue引入图片问题

1. vue文件引入文件

   1. 第一种

      <template>
      <div id="home">
              <img :src="BackgroundImage" />
          </div>
      </template>
      
      <script type="text/javascript">
      import BackgroundImage from "@/assets/images/background.png";
      export default {
          name: "home",
          data() {
              return {
                  BackgroundImage,
                  // BackgroundImage: require('@/assets/images/background.png')
              };
          },
          methods: {},
      };
      </script>
      

   2. 第二种

      <template>
          <div id="home">
              <img
                  :style="`width:100px; height:100px; background-image: url(${require('@/assets/images/background.png')})`"
              />
          </div>
      </template>
      
      

2. vue文件中的css引入图片

   前面加上一个~
   关于~的代表的意思

   body {
       height: 100%;
       background: #fff url("~@/assets/images/background.png") 50% 50% no-repeat;
       background-size: cover;
   }