vue中引入圖片的方法示例
更新時(shí)間：2023年06月19日 15:56:23 作者：蔚藍(lán)色的風(fēng)暴
在我們寫vue項(xiàng)目中肯定會用到各種圖片,那么如何更好的使用圖片資源呢?下面這篇文章主要給大家介紹了關(guān)于vue中引入圖片的方法,需要的朋友可以參考下
一、圖片放在/public目錄下
<!-- img標(biāo)簽引入圖片：圖片名稱，這種屬于相對路徑，在index.html的同級目錄下查找此圖片 -->
<img src="login-bg.png">
<!-- img標(biāo)簽引入圖片：'/' + 圖片名稱，這種屬于絕對路徑，/表示編譯后的dist文件夾 -->
<img src="/login-bg.png">
<!-- style樣式引入圖片時(shí)，需要用url來處理圖片路徑，url內(nèi)部寫法和img的src相同 -->
<div style="background-image: url('login-bg.png');"></div>
<div style="background-image: url('/login-bg.png');"></div>二、圖片在/src/assets目錄下
此時(shí)需要使用相對路徑來引用
我們先看一下@是否配置為了src目錄，查看vue.config.js
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
}
}方法1：在vue中設(shè)置一個(gè)變量來引入
data () {
img: require('@/assets/images/img.jpg')
}然后直接在img中使用
<img :src="img">
方法2：在css樣式中引用
<div class="img-class"></div>
<style scoped>
.img-class {
background-image: url('~@/assets/img/img.png')
}
</style>總結(jié)
到此這篇關(guān)于vue中引入圖片的文章就介紹到這了,更多相關(guān)vue引入圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 集成 vis-network 實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D的方法
這篇文章主要介紹了vue 集成 vis-network 實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì) ,需要的朋友可以參考下2019-08-08
Vue項(xiàng)目中vue.config.js常用配置項(xiàng)詳解
在 Vue CLI 創(chuàng)建的項(xiàng)目中,vue.config.js 是核心配置文件,用于定制化構(gòu)建、開發(fā)和部署流程,本文詳細(xì)解析了該文件的常用配置項(xiàng),并結(jié)合代碼示例和表格說明,幫助開發(fā)者高效管理項(xiàng)目配置,提升開發(fā)體驗(yàn),需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細(xì)介紹了Vue3自定義drag指令的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Vue實(shí)現(xiàn)DateRange選擇器的禁選功能
在基于Vue.js構(gòu)建的應(yīng)用程序中,處理日期選擇器是一個(gè)常見的需求,尤其是在涉及到日期范圍的選擇時(shí),Vue提供了多種方式來實(shí)現(xiàn)日期選擇器的功能,并允許我們對這些組件進(jìn)行高度定制,本文將深入探討如何在Vue應(yīng)用中實(shí)現(xiàn)DateRange選擇器的禁選功能,需要的朋友可以參考下2024-10-10
利用WebStorm創(chuàng)建一個(gè)Vue項(xiàng)目的完整步驟
WebStorm是一個(gè)非常適合學(xué)習(xí)和開發(fā)Vue項(xiàng)目的集成開發(fā)環(huán)境,下面這篇文章主要給大家介紹了關(guān)于利用WebStorm創(chuàng)建一個(gè)Vue項(xiàng)目的完整步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法
這篇文章主要介紹了關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法，實(shí)現(xiàn)方法有兩種，本文通過實(shí)例代碼對每種方法介紹的很詳細(xì)，需要的朋友參考下2018-12-12
vue3-treeselect數(shù)據(jù)綁定失敗的解決方案
這篇文章主要介紹了vue3-treeselect數(shù)據(jù)綁定失敗的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家介紹了Vue之Axios異步通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)，在子組件上顯示不出來，本文給大家分享兩種解決方案幫助大家解決這個(gè)問題,需要的朋友可以參考下2023-08-08
elementui 日期選擇器el-date-picker如何給指定日期添加圓點(diǎn)標(biāo)注
這篇文章主要介紹了elementui 日期選擇器el-date-picker如何給指定日期添加圓點(diǎn)標(biāo)注,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07