前端vue-cli項目中使用img圖片和background背景圖的幾種方法
更新時間：2019年11月13日 08:29:13 作者：淺吟輕唱
這篇文章主要介紹了前端vue-cli項目中使用img圖片和background背景圖的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前端中背景圖片極其常用,但是很容易出現(xiàn)各種問題.
一種是腳手架本身資源引用方式的問題,如指定靜態(tài)資源文件夾.
一種是圖片資源引入方式,有時候使用絕對或者相對路徑會導(dǎo)致錯誤.
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" />
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何基于vue2實現(xiàn)簡單的印章徽章控件,文中通過示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,需要的朋友們下面就跟隨小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法
這篇文章主要介紹了Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法，文中大家給大家列舉了三種方法 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue+element實現(xiàn)打印頁面功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Carousel（走馬燈）是一種常見的前端組件,通常用于展示多個項目（通常是圖片或內(nèi)容塊）的輪播效果,這篇文章主要介紹了vue3項目中的el-carousel 輪播圖的使用,需要的朋友可以參考下2024-02-02
基于Vue+Openlayer實現(xiàn)動態(tài)加載geojson的方法
本文通過實例代碼給大家介紹基于Vue+Openlayer實現(xiàn)動態(tài)加載geojson的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)div拖拽互換位置的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue el-table實現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實現(xiàn)多選框回填的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
在我們的印象使用中，vue除了寫業(yè)務(wù)代碼沒有特別新奇的功能了，今天就來看看如何自動化生成vue組件文檔2021-06-06
Vuex modules模式下mapState/mapMutations的操作實例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
filter?方法會創(chuàng)建一個新的數(shù)組,其中包含滿足指定條件的所有元素,這個方法非常適合循環(huán)遍歷數(shù)組并根據(jù)特定條件過濾元素的情況,這篇文章主要介紹了Vue3基礎(chǔ)[常用的循環(huán)],需要的朋友可以參考下2024-01-01