There is such a requirement in the project that it is necessary to add corresponding background images for different types of content.
The effect is as follows:
Main code:
first define an array whose content is the name of the picture globally, and then use the id as a subscript to obtain the corresponding picture name where the picture is needed, and then
splice the path to obtain the picture resource.
var backgroundimage = ["bg1.png", "bg2.jpg", "weipay1.png"];
style={
{
backgroundImage: `url(${
"./pic/" + backgroundimage[item.userLevelId - 1]})`,
}}
Full code:
<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>