首先引入想要的图片,请看上面的目录
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>
        )
    }
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐