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"),
            }
          ];

这样就可以了,打包也没问题

posted @ 2017-04-06 10:51  李元夕cool  阅读(1174)  评论(0编辑  收藏  举报