原來我的方法是

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

這樣就可以了，打包也沒問題

轉載于:https://www.cnblogs.com/lyxverycool/articles/6672434.html

總結

以上是生活随笔為你收集整理的map遍历react中img图片路径出错的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。