プロジェクトには、さまざまな種類のコンテンツに対応する背景画像を追加する必要があるという要件があります。
効果は次のとおりです。
メイン コード:
まず、コンテンツがグローバルなピクチャの名前である配列を定義し、次に 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>