react img 被自动转成base64,无法根据当前路径来动态改变值的解决办法
项目需求,需要根据当前的图片的路径值的来(加或者减)动态改变其值: state定义如下:
this.state={
basket01:0+require("../../img/egg/egg1_00.png"),
basket02:0+require('../../img/egg/egg2_00.png'),
basket03:0+require('../../img/egg/egg3_00.png'),
basket04:0+require('../../img/egg/egg4_00.png'),
}
重点就是前面的数值:
render 代码如下:
<img className="egg-pen" src={this.state.basket01.substring(1,this.state.basket01.length)} alt=""/>
计算操作的方法代码为:
add (index){
let basket01Num = this.state.basket01.substring(0,1)
let basket02Num = this.state.basket02.substring(0,1)
let basket03Num = this.state.basket03.substring(0,1)
let basket04Num = this.state.basket04.substring(0,1)
let eggSum = this.state.eggSum
this.setState({
eggSum:--eggSum
})
if(index === 1){
++basket01Num
this.setState({
basket01:basket01Num+require(`../../img/egg/egg1_0${basket01Num}.png`)
})
}else if(index === 2){
++basket02Num
this.setState({
basket02:basket02Num+require(`../../img/egg/egg2_0${basket02Num}.png`)
})
}else if(index === 3){
++basket03Num
this.setState({
basket03:basket03Num+require(`../../img/egg/egg3_0${basket03Num}.png`)
})
}else{
++basket04Num
this.setState({
basket04:basket04Num+require(`../../img/egg/egg4_0${basket04Num}.png`)
}) }
}
项目实现的效果:
通过加减来改变图片里面的鸡蛋数量
react img 被自动转成base64,无法根据当前路径来动态改变值的解决办法的更多相关文章
- 在Closing事件中,将e.Cancle设置成true,则Windows无法关机和重启系统的解决办法
最近在设计一个WinForm程序的时候遇到一个bug,就是From1窗体的关闭事件中设置了e.Cancle设置成true,导致系统无法关机重启,windows7 和windows xp都是这样. 我这 ...
- 导出成可运行jar包时所遇问题的解决办法 - 转载
Could not find main method from given launch configuration 当我把我的Java工程导出为可运行的jar包时,遇到了“Could not fin ...
- 转换成的jar文件接收后台的信息乱码cmd解决办法
运行——cmd—— java -jar -Dfile.encoding=utf-8 xxx.jar
- react中IOS手机里面两个input同时存在时,聚焦focus失效解决办法
最近在做webapp搜索功能时,用到两个input同时存在时,轻点input聚焦时,ios手机软键盘弹起又失效,一直在寻找合理的解决办法,现在最简单的总结回顾: <一>bug显示 < ...
- C# 将DLL制作CAB包并在浏览器下载,自动安装。(Activex)(包括ie打开cab包一直弹出用户账户控制,确定之后无反应的解决办法。)
制作Activex程序网上有很多方法我就不说了,我的业务主要做的就是将DLL打包成CAB供浏览器下载. 下面制作证书,以及制作cab包需要用到一些工具.我将工具包上传到自己的博客园里了,以供大家下载. ...
- react系列一,react虚拟dom如何转成真实的dom
react,想必作为前端开发一定不陌生,组件化以及虚拟dom使得react成为最受欢迎额前端框架之一.我们知道react是基于虚拟dom的,但是什么是虚拟dom呢,其实就是一组js对象,那么我们今天就 ...
- delphi将图片转换成Base64编码函数
{************************************************************************** 名称: BaseImage 参数: fn: TF ...
- 将上传图片转成base64(转)
效果如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"><titl ...
- WebApi系列~FromUri参数自动解析成实体的要求
回到目录 关于webapi我之前写了一些文章,大家可以根据目录去浏览,今天要说的是个怪问题,也是被我忽略的一个问题,当你的Url参数需要被Api自动解析成实体的属性,实事上是要有条件的,不是所以属性都 ...
随机推荐
- 使用命令行模式启动VMWare虚拟机
工作中使用到在centos中安装vmware Workstation部署虚拟机,以前都是使用图形界面启动虚拟机,由此要调整VNC的分辨率大小,重启VNC Server后所有虚拟机都关闭了.事后分析可能 ...
- Dockerfile编写的注意事项
一.Dockerfile合理分层 Dockerfile的写法不合理,有时候会导致镜像膨胀,由于Docker是分层设计,而在Dockerfile中,每一条指令都拥有自己的context,而执行到下一条指 ...
- day_4.30 py
2018-4-30 13:02:32 ''' 多态:只有当调用方法的时候才知道调用父类 还是子类的方法(随变化而变化,等到真正实行的时候才知道结果) 面向对象三个特点: 封装 继承 多态 ''' cl ...
- html表格的基本用法
表格的基本用法 1.<!DOCTYPE html><html><head lang="en"> <meta charset="U ...
- 180714、JRebel插件安装配置与破解激活(多方案)详细教程
JRebel 介绍 IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,才能生效,浪费不少生命啊.目前对于idea热部署最好的解决方案就是安装JRebel插件 ...
- CodeForces - 754D
All our characters have hobbies. The same is true for Fedor. He enjoys shopping in the neighboring s ...
- API(一)之Serialization
virtualenv is a tool to create isolated Python environments. 建立一个新的环境 Before we do anything else we' ...
- hdu2594 Simpsons' Hidden Talents【next数组应用】
Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java ...
- hbase 的一些坑
1)如果你是要远程调用api, 除了依赖包.还要要zookeeper 节点的master, 配置:C:\Windows\System32\drivers\etc\hosts master. ...
- Xcode 10 正在编辑时 闪退
1.Xcode 10 正在编辑时 闪退 好在Xcode做了很好的及时保存机制和现场恢复措施,就算突然闪退,重新打开Xcode 还能看到之前的代码. 可以让Xcode的工程编译设置恢复成Xcode 之前 ...