Vue頁面中引入img圖片的方法
我們?cè)趯W(xué)習(xí)html的時(shí)候,圖片標(biāo)簽<img>引入圖片
<img src="../assets/images/avatar.png" width="100%">
但是這樣會(huì)有2個(gè)弊端:
- 因?yàn)椴捎媒^對(duì)路徑引入,所以如果后面這張圖片移動(dòng)了目錄,就需要修改代src里的路徑
- 如果這張圖片在同一頁面內(nèi)有多個(gè)地方要使用到,就需要引入多次,而且圖片移動(dòng)了目錄,這么多地方都要修改src路徑
怎么辦?使用動(dòng)態(tài)路徑import、require
首先講講這兩個(gè)兄弟,在ES6之前,JS一直沒有自己的模塊語法,為了解決這種尷尬就有了require.js,在ES6發(fā)布之后JS又引入了import的概念
使用import引入
import之后需要在data中注冊(cè)一下,否則顯示不了
<script> import lf1 from '@/assets/images/cityOfVitality/lf1.png' import lf2 from '@/assets/images/cityOfVitality/lf2.png' import lf3 from '@/assets/images/cityOfVitality/lf3.png' import lf4 from '@/assets/images/cityOfVitality/lf4.png' import lf5 from '@/assets/images/cityOfVitality/lf5.png' import lf6 from '@/assets/images/cityOfVitality/lf6.png' import lf7 from '@/assets/images/cityOfVitality/lf7.png' import top1 from '@/assets/images/cityOfVitality/icon_top1.png' import mixins from './mixins' export default { name: 'LeftPiece', mixins: [mixins], data () { return { lf1, lf2, lf3, lf4, lf5, lf6, lf7, top1 } } } </script>
使用require引入
<script> import top1 from '@/assets/images/cityOfVitality/icon_top1.png' import mixins from './mixins' export default { name: 'RightPiecr', mixins: [mixins], data () { return { rt1: require('@/assets/images/cityOfVitality/rt1.png'), rt2: require('@/assets/images/cityOfVitality/rt2.png'), rt3: require('@/assets/images/cityOfVitality/rt3.png'), rt4: require('@/assets/images/cityOfVitality/rt4.png'), rt5: require('@/assets/images/cityOfVitality/rt5.png'), rt6: require('@/assets/images/cityOfVitality/rt6.png'), top1 } } } </script>
到此這篇關(guān)于Vue頁面中引入img圖片的方法的文章就介紹到這了,更多相關(guān)Vue引入img圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vuex處理用戶Token過期及優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊及Token?過期問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3父子組件傳值中props使用細(xì)節(jié)淺析
這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的全過程
vue-cli是創(chuàng)建Vue項(xiàng)目的一個(gè)腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue中element-ui不能修改el-input框,或是不能修改某些值問題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue.js 打包時(shí)出現(xiàn)空白頁和路徑錯(cuò)誤問題及解決方法
這篇文章主要介紹了vue.js 打包時(shí)出現(xiàn)空白頁和路徑錯(cuò)誤問題及解決方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue 中動(dòng)態(tài)綁定class 和 style的方法代碼詳解
這篇文章主要介紹了vue 中動(dòng)態(tài)綁定class 和 style的方法,通過實(shí)例結(jié)合的形式給大家接受的非常詳細(xì),需要的朋友參考下吧2018-06-06Vue實(shí)現(xiàn)簡(jiǎn)易翻頁效果源碼分享
本文給大家分享了vue實(shí)現(xiàn)簡(jiǎn)易翻頁效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-11-11