前端vue-cli項(xiàng)目中使用img圖片和background背景圖的幾種方法
更新時(shí)間：2019年11月13日 08:29:13 作者：淺吟輕唱
這篇文章主要介紹了前端vue-cli項(xiàng)目中使用img圖片和background背景圖的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前端中背景圖片極其常用,但是很容易出現(xiàn)各種問題.
一種是腳手架本身資源引用方式的問題,如指定靜態(tài)資源文件夾.
一種是圖片資源引入方式,有時(shí)候使用絕對(duì)或者相對(duì)路徑會(huì)導(dǎo)致錯(cuò)誤.
css方法
正常使用background屬性即可.
如有問題,應(yīng)把圖片資源放入static靜態(tài)資源文件夾,不是assets之類的其他文件夾.
<div class="bgImg"></div>
<style>
.bgImg{
background-image:url("@/../static/images/logo.png")
}
</style>
import方法
使用import導(dǎo)入背景圖片
import bgImg from "@/../static/images/logo.png"
export default {
name: 'App',
data () {
return {
bgImg: bgImg,
}
}
}
使用內(nèi)聯(lián)樣式
<div :style="{backgroundImage:'url('+bgImg+')'}"></div>
require方法
使用require獲取圖片
export default {
name: 'App',
data () {
return {
bgImg: require("@/../static/images/logo.png"),
}
}
}
賦值為img的src
<img :src="bgImg" />
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂播放器的示例
這篇文章主要介紹了vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂播放器的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于vue中created和mounted區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue3 獲取當(dāng)前組件實(shí)例及場(chǎng)景分析
在Vue 3中,getCurrentInstance是一個(gè)用于獲取當(dāng)前組件實(shí)例的重要函數(shù),以下是對(duì)getCurrentInstance的詳細(xì)分析,感興趣的朋友一起看看吧2024-12-12
postcss一種對(duì)css編譯的工具，類似babel對(duì)js的處理，postcss只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過插件實(shí)現(xiàn)功能，autoprefixer就是其一2023-02-02
Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
本篇文章主要介紹了vue.js 獲取當(dāng)前自定義屬性值，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue和小程序項(xiàng)目中使用iconfont的方法
這篇文章主要介紹了vue中和小程序中使用iconfont的方法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
在Vue2項(xiàng)目中使用Mock.js的詳細(xì)教程
Mock.js?是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請(qǐng)求的?JavaScript?庫(kù),它非常適合在前端開發(fā)中模擬后端?API,尤其是在前后端分離的開發(fā)模式下,本文給大家介紹了如何在Vue2項(xiàng)目中使用Mock.js,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Vue+Element?switch組件的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06