Vue中img的src是動(dòng)態(tài)渲染時(shí)不顯示的解決

更新時(shí)間：2019年11月14日 09:36:39 作者：laishaojiang

今天小編就為大家分享一篇Vue中img的src是動(dòng)態(tài)渲染時(shí)不顯示的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

今天在項(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是動(dòng)態(tài)渲染時(shí)不顯示的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法
這篇文章主要給大家介紹了關(guān)于Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
詳解如何優(yōu)雅的進(jìn)行Vue的狀態(tài)管理
隨著項(xiàng)目的發(fā)展和復(fù)雜性的增加,對(duì) Vuex 進(jìn)行更深入的了解和使用就變得非常重要,本篇文章將帶您探索 Vuex 的進(jìn)階使用,包括模塊化、命名空間、getter 的高級(jí)用法等,需要的朋友可以參考下
2023-09-09
vue2升級(jí)vue3問題bug解決分析整理
這篇文章主要介紹了vue2升級(jí)vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器)功能
最近項(xiàng)目中有個(gè)場(chǎng)景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點(diǎn)擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標(biāo)及各種鍵控制?縮放，左右旋轉(zhuǎn)，移動(dòng)等功能,這篇文章主要介紹了Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器),需要的朋友可以參考下
2023-12-12
vue實(shí)現(xiàn)豎屏滾動(dòng)公告效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)豎屏滾動(dòng)公告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
解析vue的provide和inject使用方法及其原理
這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過源碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-10-10
關(guān)于el-table-column的formatter的使用及說明
這篇文章主要介紹了關(guān)于el-table-column的formatter的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue+video.js實(shí)現(xiàn)視頻播放列表
這篇文章主要為大家詳細(xì)介紹了vue+video.js實(shí)現(xiàn)視頻播放列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue使用Axios做ajax請(qǐng)求詳解
本篇文章主要介紹了vue使用Axios做ajax請(qǐng)求詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06