react 引入動態圖片方式


背景:需要根據接口返回值動態渲染本地圖片,已事先在本地存儲同名圖片

寫法一:紅色框,死活不行

原因:接口返回之前,react這一步已經渲染,拿到的就是undefined,就報錯了

 

 

寫法二:綠色框,想着用異步加載,不報錯了,但是圖片也沒出來了,

寫法三:三元表達式  行是行 ,就是繁瑣了點,是應該優化的

寫法四:最后一種,接口回來之前,給默認值,就OK了

本想着繼續優化下 寫成以下這種(如果第一個沒有值就不會往下走,欺騙react的渲染):發現還是會報錯

<img alt="" src={require(`../../../assets/img/${historyDetail.organCode && historyDetail.organCode}.jpg`)} />

備注:react中img標簽不能直接這樣給src: <img src="../../images/img.png" alt="" />


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM