vue中引入圖片的方法示例
更新時間：2023年06月19日 15:56:23 作者：蔚藍色的風暴
在我們寫vue項目中肯定會用到各種圖片,那么如何更好的使用圖片資源呢?下面這篇文章主要給大家介紹了關于vue中引入圖片的方法,需要的朋友可以參考下
一、圖片放在/public目錄下
<!-- img標簽引入圖片：圖片名稱，這種屬于相對路徑，在index.html的同級目錄下查找此圖片 -->
<img src="login-bg.png">
<!-- img標簽引入圖片：'/' + 圖片名稱，這種屬于絕對路徑，/表示編譯后的dist文件夾 -->
<img src="/login-bg.png">
<!-- style樣式引入圖片時，需要用url來處理圖片路徑，url內部寫法和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中設置一個變量來引入
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>總結
到此這篇關于vue中引入圖片的文章就介紹到這了,更多相關vue引入圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了element實現二級菜單和頂部導航聯動的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了淺談Vue數據響應，Vue的數據響應主要是依賴了Object.defineProperty()，下面就具體來介紹一下如何實現數據響應2018-11-11
這篇文章主要介紹了淺談Vue項目骨架屏注入實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
最近被問起是否了解vue的插槽（slot），咋一想發(fā)現，似乎很少用到這玩意。所以整理了下slot的一些用法2022-08-08
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3之組件狀態(tài)保持KeepAlive的簡單使用
這篇文章主要介紹了Vue3之組件狀態(tài)保持KeepAlive的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue-cli 配置資源引用的絕對路徑的問題，本文通過圖文實例相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
vue源碼學習之Object.defineProperty對象屬性監(jiān)聽
這篇文章主要介紹了vue源碼學習之Object.defineProperty對象屬性監(jiān)聽，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結合實例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關操作步驟與實現技巧,需要的朋友可以參考下2019-05-05
Vue.js?核心特性之一就是雙向綁定,本文將深入探討?Vue2?和?Vue3?在雙向綁定上的區(qū)別,并分析這些改進對性能和開發(fā)體驗的影響,希望對大家有所幫助2024-11-11