情況1：圖片在/public目錄下

把圖片放到與index.html同級的目錄下

情況1-1.png

方式1

因為vue編譯后會生成index.html，所以我們將圖片與index.html放在同一目錄下，相當(dāng)于在index.html中使用引入圖片

情況2：圖片在/src/assets目錄下

把圖片放到/src/assets目錄下

情況2-1.png

文件層級關(guān)系見下圖

情況2-2.png

已知我們在vue中配置@為src的目錄

情況2-3.png

方式1

在vue組件中定義一個變量，變量值為”使用require()方法獲取的文件路徑”。

require()方法是將編寫代碼時定義的路徑轉(zhuǎn)換為編譯打包后的路徑。

// 在vue組件中定義此變量，組件創(chuàng)建成功后該變量值為'/static/img/login-bg.df6a3174.png'

backgroundImgUrl: require('@/assets/login-bg.png')

方式2

在vue文件中使用style標(biāo)簽寫css樣式

.login-container {

/*

* 當(dāng)前vue文件在login文件下，我們梳理一下通過相對路徑找到圖片文件

* login ↑ views ↑ src ↓ assets ↓ login-bg.png

* 于是我們得出如下路徑，經(jīng)過測試可以成功引入圖片

* 這里需要提一下，這里路徑是編寫代碼時的路徑，vue在編譯打包時會對路徑進行處理

*/

background-image: url('../../assets/login-bg.png');

/*

* 在vue文件中的style標(biāo)簽內(nèi)，也可以使用@表示src目錄，不過要在前面加~，也就是~@

* 使用~@后我們就可以快速寫出下面的路徑了

*/

background-image: url('~@/assets/login-bg.png');

/* 此行樣式：背景圖會按比例縮放填充滿整個背景(能保證背景圖不變形) */

background-size: cover;

}

總結(jié)

以上是生活随笔為你收集整理的vue html引入图片,vue引入图片的几种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。