vue中引入圖片的方法示例

更新時間：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樣式引入圖片時，需要用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目錄下

此時需要使用相對路徑來引用

我們先看一下@是否配置為了src目錄，查看vue.config.js

configureWebpack: {
	resolve: {
        alias: {
          '@': resolve('src'),
        },
      }
}

方法1：在vue中設(shè)置一個變量來引入

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)文章

element實(shí)現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動的示例
本文主要介紹了element實(shí)現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
淺談Vue數(shù)據(jù)響應(yīng)
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)，Vue的數(shù)據(jù)響應(yīng)主要是依賴了Object.defineProperty()，下面就具體來介紹一下如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)
2018-11-11
淺談Vue項(xiàng)目骨架屏注入實(shí)踐
這篇文章主要介紹了淺談Vue項(xiàng)目骨架屏注入實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Vue深入理解插槽slot的使用
最近被問起是否了解vue的插槽（slot），咋一想發(fā)現(xiàn)，似乎很少用到這玩意。所以整理了下slot的一些用法
2022-08-08
Ant Design Vue Table組件合并單元格方式
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue3之組件狀態(tài)保持KeepAlive的簡單使用
這篇文章主要介紹了Vue3之組件狀態(tài)保持KeepAlive的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
解決vue-cli 配置資源引用的絕對路徑問題
這篇文章主要介紹了vue-cli 配置資源引用的絕對路徑的問題，本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-09-09
vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
vue路由守衛(wèi)+登錄態(tài)管理實(shí)例分析
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結(jié)合實(shí)例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關(guān)操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
淺析Vue2和Vue3中雙向綁定機(jī)制的優(yōu)化與差異
Vue.js?核心特性之一就是雙向綁定,本文將深入探討?Vue2?和?Vue3?在雙向綁定上的區(qū)別,并分析這些改進(jìn)對性能和開發(fā)體驗(yàn)的影響,希望對大家有所幫助
2024-11-11