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>        )    }
原创粉丝点击