在项目中有这样的需求，需要为不同类型的内容添加对应的背景图。
效果如下：
主要代码：
首先在全局定义一个内容为图片名字的数组，然后在需要图片的地方，通过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>