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

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

转载于:https://www.cnblogs.com/lyxverycool/articles/6672434.html

map遍历react中img图片路径出错相关推荐

vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
ASP.NET中的图片路径问题
ASP.NET中的图片路径问题,相信大家都遇到过,而且很烦.比如,我们的图片路径是在根目录\images\下,在主页面我们想用里面的图片,在用户控件中我们也想用那个目录下的图片,而用户控件往往我们会把 ...
mysql 字符串替换：处理历史稿件中的图片路径
REPLACE字符串替换函数 REPLACE(str,from_str,to_str) 示例: select REPLACE('123abcd89', 'abcd', '4567'); 输出结果: 1 ...
利用MySQL语句批量替换指定wordpress文章中的图片路径
天花了很多时间将SAE服务器中的图片下载到本地,然后删掉,但是有一个问题就是,所有文章中的图片路径还是以前的,没有根据域名来.导致下午某些时间段图片都是无法显示的,后来想到用MySQL直接批量替换,执 ...
vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .all_bg { background: url(../imag ...
新手零基础：飞桨代码中关于图片路径读取和资源解压报错
#飞桨代码中关于图片路径读取和资源解压报错 1.路径读取在进行路径图片读取时,不同版本的python的os模块在路径拼接时会报错,一般情况下os.path.join(path,name),是可以将路 ...
php img本地图片路径,php 替换文章中的图片路径,下载图片到本地服务器的方法
php 替换文章中的图片路径,下载图片到本地服务器 /** * 获取替换文章中的图片路径 * @param string $xstr 内容 * @param string $oriweb 网址 * @ ...
在java中图片路径_java中获取图片路径三中方法
java中获取图片路径的方法 //获取路径三中方法 //+ f.getOriginalFilename(); //String filedir = Thread.currentThread().get ...
vue打包中background-image图片路径问题
按照以往在css文件中写background:url('图片路径'),完成后加载竟然显示出错,起初以为路径不对,检查了几遍,仍然没有问题.最后百度找答案,发现不少同行都遇到过这种问题,遂记录下自己所采 ...

map遍历react中img图片路径出错

map遍历react中img图片路径出错相关推荐

最新文章

热门文章