中圖片和背景圖引用

vue中圖片和背景圖引用（img和background-image）

一、背景圖引入

1.第一種方式

<div class="bgimg"></div>

.bgimg{
    width: 150px;
    height: 60px;
    /*以下兩種路徑方式都可以*/
    /*background-image: url('../../../../assets/images/logo.png');*/
    background-image: url('~@/assets/images/logo.png');
    background-size: cover
  }

2.第二種方式

<div :style="{backgroundImage: 'url(' + require('@/assets/images/logo.png') + ')' }"></div>

3.第三種方式

<div :style="{backgroundImage: 'url(' + imgData + ')' }"></div>

<script>
import logo from '@/assets/images/logo.png'
export default {
  data() {
    return {
      imgData: logo 
    }
  }
}
</script>

問題分析

	<div style="background-image: url('../../../../assets/images/logo.png');"></div>
  <!--直接使用上面這種內聯樣式：style="background-image: url('../../../../assets/images/logo.png')的方式引入背景圖時，
    由於url('../../../../assets/images/logo.png')中的靜態路徑不會被編譯處理，所以在項目運行起來或者項目打包編譯之後，
    按照此處../../../../assets/images/logo.png路徑無法找到圖片。
    如果圖片放在static路徑下，則可以直接這樣引入，引入static下的文件不會被打包編譯"-->
    <div style="background-image: url('static/logo.png');"></div>

二、img引入圖片

 	<!--第一種-->
    <img src="~@/assets/images/logo.png" alt="">
    <img src="../../../../assets/images/logo.png" alt="">
    <!--第二種-->
    <img :src="imgData" alt="">
    <!--第三種-->
    <img :src="require('../../../../assets/images/logo.png')" alt="">