vue中img標(biāo)簽的src屬性總結(jié)(問題解決)
更新時間：2023年11月16日 16:02:53 作者：小鍋蓋快跑
初步接觸vue框架時,好多朋友使用img標(biāo)簽時,設(shè)置動態(tài)src屬性時,可能都會遇到路徑不生效的問題,本文給大家介紹vue中img標(biāo)簽的src屬性總結(jié),感興趣的朋友一起看看吧
vue中img標(biāo)簽的src屬性的使用
初步接觸vue框架時,好多朋友使用img標(biāo)簽時,設(shè)置動態(tài)src屬性時,可能都會遇到路徑不生效的問題,咱們廢話不多說,開整!!!
img標(biāo)簽引用資源圖片
一般不需要webpack處理的資源放在static,需要經(jīng)過處理的放在assets
1.不需要webpack處理的圖片放在static
不需要webpack處理的圖片,直接使用絕對路徑調(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原封不動地放在了根目錄下。
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ù)遇到新的方法再補充,希望對你有幫助.
到此這篇關(guān)于vue中img標(biāo)簽的src屬性總結(jié)的文章就介紹到這了,更多相關(guān)vue src屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了在vue中實現(xiàn)嵌套頁面(iframe)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家介紹了vue2項目增加eslint配置代碼規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
在uniapp中實現(xiàn)圖形驗證碼的詳細(xì)步驟
圖形驗證碼是一種常見的安全措施,用于防止自動化軟件（機器人）濫用網(wǎng)站資源,如自動提交表單,這篇文章主要介紹了在uniapp中實現(xiàn)圖形驗證碼的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
ElementUI中el-form組件的rules參數(shù)舉例詳解
Form組件提供了表單驗證的功能,只需要通過rules屬性傳入約定的驗證規(guī)則,并將Form-Item的prop屬性設(shè)置為需校驗的字段名即可,下面這篇文章主要給大家介紹了關(guān)于ElementUI中el-form組件的rules參數(shù)的相關(guān)資料,需要的朋友可以參考下2023-10-10
詳解vue3自定義指令實現(xiàn)?v-focus?功能
在Vue3中,可以通過自定義指令來實現(xiàn)v-focus功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-05-05
這篇文章主要介紹了vue之this.$router.push頁面刷新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue中的slot-scope及scope.row用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue項目在線上服務(wù)器訪問失敗原因分析，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
利用Vue3+ElementUI樹形菜單實現(xiàn)層次化用戶界面
ElementUI是一個超棒的UI框架,它基于Vue.js提供了豐富的組件和樣式,可以幫你快速構(gòu)建出美觀實用的登陸頁面,這篇文章主要介紹了利用Vue3+ElementUI樹形菜單實現(xiàn)層次化用戶界面的相關(guān)資料,需要的朋友可以參考下2026-04-04
在做數(shù)據(jù)大屏開發(fā)的過程中,經(jīng)常出現(xiàn)需要對列表進(jìn)行自動滾動的需求,所以本文就來為大家介紹一下如何利用vue封裝一個自動循環(huán)滾動的列表吧2023-09-09