在项目中有这样的需求,需要为不同类型的内容添加对应的背景图。
效果如下:
主要代码:
首先在全局定义一个内容为图片名字的数组,然后在需要图片的地方,通过id作为下标取得对应图片名字,
再拼接路径去获取图片资源。
var backgroundimage = ["bg1.png", "bg2.jpg", "weipay1.png"];
style={{
backgroundImage: `url(${"./pic/" + backgroundimage[item.userLevelId - 1]})`,
}}
完整代码:
<div maxWidth={1000}>
<List
style={{ zIndex: 1 }}
split='false'
grid={{
xs: 1, sm: 1, md: 2,
lg: 2, xl: 2, xxl: 2,
}}
dataSource={paydata}
renderItem={item => (
<List.Item >
<div style={{ minWidth: '700px' }}>
<Row>
<Col xs={24} md={24} xl={24} >
<div onClick={() => this.pay(item.userLevelId)}
style={{
height: 200, width: 400, float: 'left',
backgroundImage: `url(${"./pic/" + backgroundimage[item.userLevelId - 1]})`,
backgroundSize: 'cover', backgroundPosition: 'center', overflow: 'hidden'
}}
className="paytype" >
<div style={{ display: 'flex', alignItems: 'center', height: 150 }}>
<div style={{ color: 'white' }}>
<div style={{ fontSize: '45px', marginTop: '70px', textAlign: 'center' }}>
<span style={{ letterSpacing: '20px', textAlign: 'center' }}>{item.userLevelName}会员</span>
</div>
<div style={{ fontSize: '15px' }}>
<p style={{ textAlign: 'center', }}> 会员描述{item.userLevelDescribe} </p>
</div>
<div style={{ fontSize: '15px', width: 400, height: '70px', textAlign: 'center', background: 'rgb(0,0,0,0.2)' }} className="choose"><br />
费用: {item.userLevelCeo / 100} 元
</div>
</div>
</div>
</div>
</Col>
</Row>
</div>
</List.Item>
)}
/>
</div>