Vue中img的src是動態渲染時不顯示的解決

今天在項目中遇到一個需求，設計稿如下

就是展示用戶頭像，數據從后端獲取，要是沒有拿到則顯示默認圖片。

項目采用vue開發，本人也是第一次在實際項目中使用vue。

自然而然采用條件渲染，我的代碼如下：

保存運行查看，發現沒顯示默認的圖片，審查元素發現圖片沒有被打包

有點懵~

后來查閱資料發現圖片使用require引入即可，更改后代碼為：

搞定~

以上這篇Vue中img的src是動態渲染時不顯示的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。

時間： 2019-11-13

好久沒更博了,最近也不知道在忙啥,反正就是感覺挺忙的,在群里看到陸陸續續有剛入vue小伙伴問vue動態加載圖片總是404的狀況,這篇就簡單的說明為什么會出現以及解決辦法有哪些. 首先先說明下vue-cli的assets和static的兩個文件的區別,因為這對你理解后面的解決辦法會有所幫助 assets:在項目編譯的過程中會被webpack處理解析為模塊依賴,只支持相對路徑的形式,如< img src="./logo.png">和background:url(./logo.p

相信開發的小伙伴已經遇到這個問題了,動態切換img標簽的src時,寫的路徑就是不生效,原因是vue并沒有把你的路徑字符串當做路徑來處理,而是直接當做字符串了,當然網上也有很多方法,這里使用的是最有效的方法. 看代碼: 使用導入資源的方式

目錄: 注意:本地json文件和json文件里的圖片地址都必須寫在static 靜態文件夾里:否則json文件里的url地址找不到. major_info.json文件里的圖片路徑寫法 頁面通過v-bind的方式加載: PS:vue中圖片src路徑賦值 vue中引入static文件夾中圖片,本以為src中直接寫入圖片所在路徑即可,結果發現圖片無法顯示,控制臺報404錯誤,圖片無法找到.網上找到解決方案,在此mark一下,以便以后查詢. 圖片src路徑動態賦值

先看一下產品需求,如下圖所示, 產品要求圖片和它的名稱一一對應,本來是非常簡單的需求,后臺直接返回圖片路徑和名稱,前臺直接讀取就可以了,但是我們沒有存儲圖片的服務器,再加上是一個實驗性的需求,圖片需要存放到前臺.當時我想,vue 中的img 的src 可以動態綁定到一個變量上, 很簡單嗎,就沒有考慮太多,直接開始做了. 首先和后臺商量一下數據結構,因為圖片要和名稱一一對應,所以后臺要返回中英文的名稱的映射,我把前臺的圖片名稱直接設置給后臺給的英文名稱,從而讀取圖片,圖片和中文名稱就一一對應了.數

一 .問題如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是對象 這里的[Vue warn]是指不要用對象或是數組作為key,用string或number作為key. :key相當于是索引的作用,提高循環性能,如果循環量較小,不寫也可以的. 以上這篇解決vue v-for 遍歷循環時key值報錯的問題就是小編分享給大家的全部內容了,希望能

1.給每個按鈕添加class的屬性值以及icon圖標屬性值,通過v-for實現自動添加樣式,發現屬性值無法顯示,切記在屬性前加上v-bind

v-for在線測試實例

總結

以上是生活随笔為你收集整理的vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。