vue 背景图引入

Posted 2022-10-29 yc..

<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>