vue中img標(biāo)簽的src屬性總結(jié)(問題解決)
vue中img標(biāo)簽的src屬性的使用
初步接觸vue框架時(shí),好多朋友使用img標(biāo)簽時(shí),設(shè)置動(dòng)態(tài)src屬性時(shí),可能都會(huì)遇到路徑不生效的問題,咱們廢話不多說,開整!!!
img標(biāo)簽引用資源圖片
一般不需要webpack處理的資源放在static,需要經(jīng)過處理的放在assets
1.不需要webpack處理的圖片放在static
不需要webpack處理的圖片,直接使用絕對(duì)路徑調(diào)用圖片,如"/static/xx/xxx.png"
栗子
html代碼
<img v-bind:src="imgUrl"/>
js代碼
data(){
return{
imgUrl:"/static/logo.png"
}
}成功讀取到了logo.png. 執(zhí)行npm run build后查看dist文件，發(fā)現(xiàn)logo.png原封不動(dòng)地放在了根目錄下。
2.需要webpack處理的圖片放在assets
可以使用import還是require進(jìn)行引入.import為es6語法,require為commonJS形式.
栗子1
<img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
栗子2
<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">栗子3
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl:require('./assets/logo.png')
}
}也可以直接引用網(wǎng)絡(luò)路徑
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
}
}先總結(jié)到這里,后續(xù)遇到新的方法再補(bǔ)充,希望對(duì)你有幫助.
到此這篇關(guān)于vue中img標(biāo)簽的src屬性總結(jié)的文章就介紹到這了,更多相關(guān)vue src屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 接口請(qǐng)求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請(qǐng)求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue如何實(shí)現(xiàn)清空this.$route.query的值
這篇文章主要介紹了vue如何實(shí)現(xiàn)清空this.$route.query的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的方法
這篇文章主要給大家介紹了關(guān)于vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,前端使用這個(gè)插件可以方便展現(xiàn)出json格式的數(shù)據(jù),下載引入使用代碼可直接使用,需要的朋友可以參考下2024-05-05
element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue組件打包并發(fā)布到npm的全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
antd?vue?表格rowSelection選擇框功能的使用方式
這篇文章主要介紹了antd?vue?表格rowSelection選擇框功能的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。2022-12-12
vue路由跳轉(zhuǎn)時(shí)判斷用戶是否登錄功能的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄獀ue路由跳轉(zhuǎn)時(shí)判斷用戶是否登錄功能的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Vue表單驗(yàn)證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實(shí)現(xiàn)表單元素校驗(yàn)時(shí)，出現(xiàn)下拉框內(nèi)容選中后校驗(yàn)不消失的異常校驗(yàn)情形，這篇文章主要介紹了Vue表單驗(yàn)證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09