Vue.js中的圖片引用路徑的方式
當(dāng)我們?cè)赩ue.js項(xiàng)目中引用圖片時(shí)，關(guān)于圖片路徑有以下幾種情形：
使用一
我們?cè)赿ata里面定義好圖片路徑
imgUrl:'../assets/logo.png'
然后，在template模板里面
/*錯(cuò)誤寫(xiě)法*/
<img src="{{imgUrl}}">
這樣是錯(cuò)誤的寫(xiě)法，我們應(yīng)該用v-bind綁定圖片的srcs屬性
<img :src="imgUrl">
或者
<img src="../assets/logo.png">
這種方式是按照正常HTML語(yǔ)法引用路徑，放在模板里可以被webpack打包出來(lái)。
使用二
當(dāng)我們需要在js代碼里面寫(xiě)圖片路徑的時(shí)候，如果我們?cè)赿ata里面寫(xiě)
/*錯(cuò)誤寫(xiě)法*/ imgUrl:'../assets/logo.png'
此時(shí)webpack只會(huì)把它當(dāng)做字符串處理從而找不到圖片地址，此時(shí)我們可以使用import引入圖片路徑：
<img :src="avatar" /> import avatar from '@/assets/logo.png'
在data里面定義
avatar: avatar
情形三
我們也可以把圖片放在外層的static文件夾里面，然后在data里面定義：
imgUrl ： '../../static/logo.png' <img :src="imgUrl" />
總結(jié)
以上所述是小編給大家介紹的Vue.js中的圖片引用路徑的方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue+element_ui上傳文件,并傳遞額外參數(shù)操作
這篇文章主要介紹了vue+element_ui上傳文件,并傳遞額外參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
Vue3視頻播放器組件Vue3-video-play新手入門(mén)教程
這篇文章主要給大家介紹了關(guān)于Vue3視頻播放器組件Vue3-video-play新手入門(mén)教程的相關(guān)資料,本文實(shí)例為大家分享了vue-video-player視頻播放器的使用配置,供大家參考,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue兼容ie9的問(wèn)題全面解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要給大家介紹了關(guān)于Swiper在Vue2中的簡(jiǎn)單使用方法,swiper是一款現(xiàn)代化的移動(dòng)端輪播組件,可以在Vue中輕松使用,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue打包上傳服務(wù)器刷新404問(wèn)題的兩種方案
這篇文章主要給大家介紹了關(guān)于vue打包上傳服務(wù)器刷新404問(wèn)題的兩種方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信
本文主要介紹了django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue通過(guò)路由實(shí)現(xiàn)頁(yè)面間參數(shù)的傳遞
這篇文章主要介紹了Vue通過(guò)路由實(shí)現(xiàn)頁(yè)面間參數(shù)的傳遞,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
VUE+Element UI實(shí)現(xiàn)簡(jiǎn)單的表格行內(nèi)編輯效果的示例的代碼
這篇文章主要介紹了VUE+Element UI實(shí)現(xiàn)簡(jiǎn)單的表格行內(nèi)編輯效果的示例的代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue實(shí)現(xiàn)數(shù)據(jù)篩選與搜索功能的示例代碼
在許多Web應(yīng)用程序中,數(shù)據(jù)篩選和搜索是關(guān)鍵的用戶(hù)體驗(yàn)功能,本文將深入探討在Vue中如何進(jìn)行數(shù)據(jù)篩選與搜索的實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue實(shí)現(xiàn)折線(xiàn)圖 可按時(shí)間查詢(xún)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)折線(xiàn)圖，可按時(shí)間查詢(xún)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08