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"), } ];
这样就可以了,打包也没问题

浙公网安备 33010602011771号