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;
    }
    
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页