react中引入图标和背景图片
来源:互联网 发布:软件怎么申请专利 编辑:程序博客网 时间:2024/06/05 16:38
首先引入想要的图片,请看上面的目录import homebackground from '../../assets/images/homebackground2x.png';const homeImage = { backgroundSize: '100% 100%', //记得这里100% background: `url(${ homeImage })`, //或者下面这种也行 backgroundImage: 'url(' + homebackground + ')'}
哪儿需要就在哪儿引入此样式,比如
render(){ return ( <div className="home" style={ homeImage }> <div className="home_running"> <div className="trade_price"> <Title title="今日交易流水(元)" style={{ width:'1.35rem',height: '0.22rem',color: '#fff'}}/> <Price price={this.state.todayPrice} style={{fontSize: '0.45rem'}}/> </div> <div className="trade_account center" onClick={this.treadEvent.bind(this)}> <Button style={{width: '1.31rem',height: '0.36rem',border: '1px solid #fff',color: '#fff'}} title="交易流水明细" /> </div> <div className="date_price flex"> <DayPrice type="昨日" price={ this.state.yesterdayPrice} style={{borderRight: '1px solid #fff'}}/> <DayPrice type="平均" price={ this.state.averagePrice} /> </div> </div> <div className="accout_message flex" style={{paddingTop:'20px'}}> <Message onClick={() => this.props.history.push('/billing_Report')} src={ require('../../assets/images/account_report.png') } content="账单报告" style={{ borderRight: '1px solid #F0EFEF'}} fontSize = {{ fontSize: '0.17rem'}} /> <Message onClick={() => this.props.history.push('/news_Inform')} src={ require('../../assets/images/news.png') } content="消息通知" fontSize = {{ fontSize: '0.17rem'}} /> </div> </div> ) }
阅读全文
0 0
- react中引入图标和背景图片
- Android中替换头像图标和背景图片
- 关于CSS中,引入背景图片和border的一点总结
- vue中引入iconfont图标
- iphone, iphone4, ipad 图标和背景图片问题
- React Native中引入外部类库
- React项目中css引入配置方法
- React Native的TextInput组件去掉下划线和使用背景图片
- QT Creator创建菜单,添加图标和背景图片
- 通过QT Creator创建菜单,添加图标和背景图片
- QT Creator创建菜单,添加图标和背景图片
- 启动U盘更换背景图片和图标的方法
- react 组件添加背景图片
- 在已有的项目中引入react native
- 在react-native中引入antd-mobile遇到的问题
- 在原生android应用中引入React Native
- 如何在现有工程中引入react.js
- Android引入react native
- redis 的两种持久化方式及原理
- 说说自己遇到的一个问题
- MD5 java程序工具类
- Spring关于IOC基础学习一
- JS函数返回值return
- react中引入图标和背景图片
- 读要闻 | 8月中国经济全面不及预期 “滞胀”的脚步越来越近?
- mysql的常用命令
- File类常用方法
- JavaScript基础之Chaining
- python文件操作详解
- React Native 原生RN嵌套webView,并自适应高度
- 机器学习-->集成学习-->Bagging,Boosting,Stacking
- final finalize finally的区别