Vue中img的src是動態(tài)渲染時(shí)不顯示的解決
更新時(shí)間：2019年11月14日 09:36:39 作者：laishaojiang
今天小編就為大家分享一篇Vue中img的src是動態(tài)渲染時(shí)不顯示的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天在項(xiàng)目中遇到一個(gè)需求，設(shè)計(jì)稿如下
就是展示用戶頭像，數(shù)據(jù)從后端獲取，要是沒有拿到則顯示默認(rèn)圖片。
項(xiàng)目采用vue開發(fā)，本人也是第一次在實(shí)際項(xiàng)目中使用vue。
自然而然采用條件渲染，我的代碼如下：
保存運(yùn)行查看，發(fā)現(xiàn)沒顯示默認(rèn)的圖片，審查元素發(fā)現(xiàn)圖片沒有被打包
有點(diǎn)懵~
后來查閱資料發(fā)現(xiàn)圖片使用require引入即可，更改后代碼為：
搞定~
以上這篇Vue中img的src是動態(tài)渲染時(shí)不顯示的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)百度語音合成的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于vue實(shí)現(xiàn)百度語音合成的實(shí)例內(nèi)容，以及相關(guān)代碼，需要的朋友們參考下。2019-10-10
本文主要介紹了vue-class遷移vite的一次踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要和大家一起學(xué)習(xí)vue.js表單控件綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue 行為驗(yàn)證碼之滑動驗(yàn)證AJ-Captcha使用詳解
這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下，本文給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05
vue父組件與子組件之間的數(shù)據(jù)交互方式詳解
最近一直在做一個(gè)vue移動端商城的實(shí)戰(zhàn),期間遇到一個(gè)小小的問題,值得一說,下面這篇文章主要給大家介紹了關(guān)于vue父組件與子組件之間數(shù)據(jù)交互的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue+element?DatePicker實(shí)現(xiàn)日期選擇器封裝
Vue?Element?DatePicker是一款基于Vue.js的日期選擇控件，它提供了豐富的日期選擇功能，支持日期范圍選擇、日期格式化、自定義日期格式、快捷選擇等功能，極大地提高了用戶的體驗(yàn)，是開發(fā)者必備的日期選擇控件。2023-02-02
在項(xiàng)目開發(fā)過程中,我們經(jīng)常會用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
el-date-picker日期時(shí)間選擇器的選擇時(shí)間限制到分鐘級別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時(shí)間,禁止選擇當(dāng)前時(shí)間的日期及時(shí)分,同時(shí)允許選擇其他日期的全天時(shí)分,通過設(shè)置 `pickerOptions` 對象的屬性,可以實(shí)現(xiàn)對日期和時(shí)間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要為大家詳細(xì)介紹了vue中路由傳參6種方式，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08