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