情況1：圖片在/public目錄下
把圖片放到與index.html同級的目錄下
情況1-1.png
方式1
因為vue編譯后會生成index.html挑庶，所以我們將圖片與index.html放在同一目錄下，相當于在index.html中使用引入圖片
<!-- img標簽引入圖片：圖片名稱举畸，這種屬于相對路徑凳枝，在index.html的同級目錄下查找此圖片 -->
<img src="login-bg.png">
<!-- img標簽引入圖片：'/' + 圖片名稱跋核，這種屬于絕對路徑叛买，/表示編譯后的dist文件夾 -->
<img src="/login-bg.png">
<!-- style樣式引入圖片時，需要用url來處理圖片路徑刻伊，url內(nèi)部寫法和img的src相同 -->
<div style="background-image: url('login-bg.png');"></div>
<div style="background-image: url('/login-bg.png');"></div>
情況2：圖片在/src/assets目錄下
把圖片放到/src/assets目錄下
情況2-1.png
文件層級關(guān)系見下圖
情況2-2.png
已知我們在vue中配置@為src的目錄
情況2-3.png
方式1
最簡便的方式就是直接在src內(nèi)用~@表示src路徑
<img src="~@/assets/login-bg.png">
方式2
在vue組件中定義一個變量，變量值為”使用require()方法獲取的文件路徑”蛾茉。
require()方法是將編寫代碼時定義的路徑轉(zhuǎn)換為編譯打包后的路徑撩鹿。
// 在vue組件中定義此變量节沦，組件創(chuàng)建成功后該變量值為'/static/img/login-bg.df6a3174.png'
backgroundImgUrl: require('@/assets/login-bg.png')
<!-- 在img標簽中可以直接使用backgroundImgUrl變量作為圖片路徑 -->
<img :src="backgroundImgUrl">
<!-- 在style中要把backgroundImgUrl變量拼接到url()中，才能正常引入圖片 -->
<div :style="{ backgroundImage: `url(${backgroundImgUrl})` }"></div>
方式3
在vue文件中使用style標簽寫css樣式
<!-- 在div標簽上綁定class吼鳞，以便使用css元素選擇器 -->
<div class="login-container"></div>
<style scoped>
.login-container {
/*
* 當前vue文件在login文件下叫搁，我們梳理一下通過相對路徑找到圖片文件
* login ↑ views ↑ src ↓ assets ↓ login-bg.png
* 于是我們得出如下路徑，經(jīng)過測試可以成功引入圖片
* 這里需要提一下疾党，這里路徑是編寫代碼時的路徑惨奕，vue在編譯打包時會對路徑進行處理
*/
background-image: url('../../assets/login-bg.png');
/*
* 在vue文件中的style標簽內(nèi)，也可以使用@表示src目錄雹洗，不過要在前面加~卧波，也就是~@
* 使用~@后我們就可以快速寫出下面的路徑了
*/
background-image: url('~@/assets/login-bg.png');
/* 此行樣式：背景圖會按比例縮放填充滿整個背景（能保證背景圖不變形） */
background-size: cover;
}
</style>
