map遍历react中img图片路径出错
原来我的方法是
const lineBottoms = [ { title: '社保代缴', img: '../images/productIntroduce/u1178.png', }, { title: '工资代发', img: '../images/productIntroduce/u1181.svg', }, { title: '资金安全', img: '../images/productIntroduce/u1186.png', }, { title: '福利商城', img: '../images/productIntroduce/u1262.png', }, { title: '增值服务', img: '../images/productIntroduce/u1192.png', } ];
<div className="containers" style={{width:'695px'}}> {lineBottoms.map( (lineBottom,i)=>{ return (<div className="text text-1" key={i}><img src={lineBottom.img}/> <div className="text-title text-center"> {lineBottom.title} </div> </div>) } )} </div>
但是这种方法如果在生产环境图片路径是不对的,所以要改成require的方法去引入图片
const url="../../images/productIntroduce/u1154.svg";
<img src={require(url)}/>
这样引进了会报错the request of a dependency is an expression
最后解决办法是把require也放了进去
const lineTops = [ { title: '薪酬管理', img: require("../../images/productIntroduce/u1154.svg"), }, { title: '社保福利', img: require("../../images/productIntroduce/u1159.svg"), }, { title: '奖金智能核算', img: require("../../images/productIntroduce/u1164.svg"), }, { title: '工时考勤', img: require("../../images/productIntroduce/u1170.png"), }, { title: '统计报表', img: require("../../images/productIntroduce/u1174.svg"), }, { title: '公司与员工管理', img: require("../../images/productIntroduce/u1224.png"), }, { title: '权限管理', img: require("../../images/productIntroduce/u1185.svg"), } ];
这样就可以了,打包也没问题