Vue.js中的圖片引用路徑的方式
更新時間：2017年07月28日 09:15:00 作者：卜小嫻
當我們在Vue.js項目中引用圖片時，關于圖片路徑有以下幾種情形,下面通過本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧
當我們在Vue.js項目中引用圖片時，關于圖片路徑有以下幾種情形：
使用一
我們在data里面定義好圖片路徑
imgUrl:'../assets/logo.png'
然后，在template模板里面
/*錯誤寫法*/
<img src="{{imgUrl}}">
這樣是錯誤的寫法，我們應該用v-bind綁定圖片的srcs屬性
<img :src="imgUrl">
或者
<img src="../assets/logo.png">
這種方式是按照正常HTML語法引用路徑，放在模板里可以被webpack打包出來。
使用二
當我們需要在js代碼里面寫圖片路徑的時候，如果我們在data里面寫
/*錯誤寫法*/ imgUrl:'../assets/logo.png'
此時webpack只會把它當做字符串處理從而找不到圖片地址，此時我們可以使用import引入圖片路徑：
<img :src="avatar" /> import avatar from '@/assets/logo.png'
在data里面定義
avatar: avatar
情形三
我們也可以把圖片放在外層的static文件夾里面，然后在data里面定義：
imgUrl ： '../../static/logo.png' <img :src="imgUrl" />
總結
以上所述是小編給大家介紹的Vue.js中的圖片引用路徑的方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
因為近日在學習并使用VUE,客戶有一個要求,要輸入框可模糊查詢并帶有下拉提示的應用,數(shù)據(jù)從接口取,下面這篇文章主要給大家介紹了關于Vue實現(xiàn)模糊查詢filter()的相關資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
watch函數(shù)用于偵聽某個值的變化,當該值發(fā)生改變后,觸發(fā)對應的處理邏輯,本文將給大家介紹了Vue3中watch監(jiān)聽的五種情況,文中通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-03-03
vue3.0運行npm run dev報錯Cannot find module&
本文主要介紹了vue3.0運行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導致,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue如何獲取圖片流數(shù)據(jù)并展示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要為大家詳細介紹了Vue3響應式核心之reactive的相關知識，文中的示例代碼講解詳細，對我們學習Vue3有一定的幫助，需要的可以參考一下2023-04-04
Vue 提供了createElement 來創(chuàng)建虛擬dom，方便我們來函數(shù)化的方式來定義復雜的組件結構，這篇文章主要介紹了Vue 中 createElement 使用詳解,需要的朋友可以參考下2022-10-10
Vue3中如何修改父組件傳遞到子組件中的值(全網(wǎng)少有!)
大家都知道,vue是具有單向數(shù)據(jù)流的傳遞特性,下面這篇文章主要給大家介紹了關于Vue3中如何修改父組件傳遞到子組件中值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
今天小編就為大家分享一篇Vue根據(jù)條件添加click事件的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11