react中引入图标和背景图片

首先引入想要的图片,请看上面的目录
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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值